jQuery模板提案(3)
作者:dishuipiaoxiang 来源:Denis'Blog 时间:2010-03-30 18:27:00
PURE(纯粹分离式渲染引擎)
PURE 模板引擎的目的在于使开发人员不使用任何特殊标记来声明模板。使用PURE有两种方法:autoRender()方法或render()方法。
使用autoRender()方法时,PURE自动将JSON的属性名称映射到css的class上。例如,你可以编写下面的代码来显示单个产品。
$(showProduct);
function showProduct() {
var product = { name: "Laptop", price: 788.67 };
$('div.product').autoRender(product);
}
autoRender()通过将product的name和price 属性分别映射到class为name和price 的元素上来显示产品。
<div class="product">
Product Name: <span class="name"></span>
<br />
Product Price: <span class="price"></span>
</div>
请注意,模板中没有特殊字符,PURE用纯粹的HTML完成一切。
autoRender()方法依赖于JSON的属性名映射到class名的协议,如果你不想依赖于该协议,你可以用render()方法来代替。
function showProduct() {
var product = { name: "Laptop", price: 788.67 };
var directives = { 'span#name' : 'name', 'span#price': 'price'};
$('div.product').render(product, directives);
}
请注意,一系列指令和要显示的项目传递给render()。这些选择器将选择器映射到JSON属性名,第一个指令将Id为name的span元素映射到name属性,第二个指令将Id为price的span元素映射到price属性。下面是HTML:
<div class="product">
Product Name: <span id="name"></span>
<br />
Product Price: <span id="price"></span>
</div>
PURE也可以用来渲染一个JavaScript对象数组。例如,下面的代码渲染一个product数组。
function showProducts() {
var data = { "products": [
{ name: "Laptop", price: 788.67 },
{ name: "Comb", price: 2.50 },
{ name: "Pencil", price: 1.99 }
]};
$('#productTemplate').autoRender(data);
}
由于数组名为product,PURE将每一个product映射到class为product的元素上,以下模板显示所有的三个product。
<div id="productTemplate">
<div class="products">
Product Name: <span class="name"></span>
<br />
Product Price: <span class="price"></span>
</div>
</div>