İstemci tarafı + Sunucu tarafı templasyonunu kullanmak çok kolay. Bazı web uygulamaları oluştururken, bazı verileri almak için ajax'ı kullanmalı ve bununla başa çıkmak için geri arama işlevini kullanmalıyız.Yani bu verileri müşteri tarafı.
Sorun, bunları istemci tarafında nasıl oluşturulacağıdır?
Şimdi bir istemci tarafına ihtiyacımız var jade.js.
bu belgeyi takip edin: https://github.com/visionmedia/jade#readme
İlk
git clone https://github.com/visionmedia/jade.git
İkinci
$ make jade.js (in fact the project has already compile the file for us)
so we just need to copy this file to the path that we use.
Üçüncü
012 Eğer derleme hangisinin anlayabilir side.If
read my demo below :
<script type='text/javascript' language='javascript' src="lib/jquery-1.8.2.min.js"></script>
<script type='text/javascript' language='javascript' src="lib/jade/jade.js"></script>
<script type='template' id='test'>
ul
li hello world
li #{item}
li #{item}
li #{item}
</script>
<script>
var compileText = $("#test").text();
console.log(typeof(compileText));
var fn = jade.compile(compileText , { layout : false });
var out = fn({item : "this is item " });
console.log(out);
$("body").append(out);
</script>
Şimdi sana yeşim sunucu tarafı ve istemci ayırmak için nasıl bilemez düşünüyorum bu demo okuduktan sonra vücudun
hello world
this is item
this is item
this is item
çıktı sonucu görebilirsiniz yeşim şablonu, sonra tüm sorular kolay.
Belki başka bir sorunuz daha var. * .jade içinde bazı yeşim şablon kodları yazmak için? Bu belge ayrıca bize bunu yapmanın bir yolunu sunar. Bu Öğretici size yardımcı olabilir.
index.jade
!!!5
html
head
title hello world
body
ul#list
script#list-template(type='template')
|- for(var i in data)
| li(class='list') \#{ data[i].name }
|- }
index.js
/* you javascript code */
var compileText = $('#list-template').text();
var compile = jade.compile(compileText , { layout : false });
var data = [{ "name" : "Ben" } , {"name" : "Jack" } , {"name" : "Rose" }];
var outputText = compile(data);
$("#list").append(outputText);
Bunu [tarayıcıda] Jade şablonları kullanabilirsiniz (https://github.com/visionmedia/jade#a4). Hem Düğümde hem de tarayıcıda çalışan birçok başka şablon motoru da var. –
Jade'in hem istemci hem de sunucu tarafında kullanılabileceğini, ancak istemci ve sunucu tarafı şablonunu dosyada nasıl ayıracağını biliyorum. Sunucu tarafı Jade işlemciye şablonun istemci bölümünü hesaplamamasını nasıl söylersiniz? –
Şablonlarınızı nasıl düzenleyeceğinizi size anlatamam, bunları çözdüğüm zaman şablonları olabildiğince basit tutmak ve aynı şablonu sunucuda ve istemcide kullanmak. Düzen yalnızca sunucuda işlenirken, kısmi (kaynak şablonları) mantıklı olduğu zaman işlenebilir. –