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>
出处:Denis'Blog
责任编辑:moby
上一页 jQuery模板提案 [3] 下一页 jQuery模板提案 [5]
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|