17-解决方案

选择背景色：黄橙洋红淡粉水蓝草绿白色选择字体：宋体黑体微软雅黑楷体选择字体大小：小中大特恢复默认

17.4.2　解决方案

本秘诀介绍的是一个书籍列表。它从一个服务器端脚本获取书籍的相关信息，将其添加到浏览器中显示的书籍列表中。从服务器返回的书籍详情是一个JSON字符串。Pure模板引擎（http://plugins.jquery.com/project/pure）用来格式化数据并插入网页中：

<!DOCTYPE html>
<html><head>
　　 <title>jQuery Cookbook - 17.4 Using a Javascript Template Engine</title>
　　 <style>.hidden { display: none }</style>
　　 <script type="text/javascript" src="../../jquery-1.3.2.min.js"></script>
　　 <script type="text/javascript" src="pure.js"></script>
</head>
<body>
　　 <h1>17.4 - Using a Javascript Template Engine</h1>
　　 <input type="button" id="add-book" value="Add book"></input>
　　 <input type="button" id="clear-list" value="Clear booklist"></input>
　　 <div id="book-list"></div>

网页上有两个按钮。当单击其中一个时从服务器读取书籍详情，另一个清除本地显示的书籍列表。书籍列表将在 id 为 book-list 的 <div> 元素中显示。这些元素在页面加载时可见：

　　 <div id="book-template" class="hidden book">
　　　　　<ul class="author-list"><li class="author"><span class="name"></span>
</li></ul>
　　　　　<p class="title"></p>
　　　　　<p class="year"></p>
　　　　　<div class='book-footer'>
　　　　　　　 <div class="rating-div">Rating: <span class="rating"></span></div>
　　　　　　　 <div>Location: <span class="location"></span></div>
　　　　　</div>
　　 </div>
</body></html>

id 为 book-template 的 <div> 指定了 hidden 类。这个 <div> 不显示，它将作为从服务器接收数据的模板。Pure模板引擎将数据结构中的属性与具有相同类的HTML元素关联。因此，具有 year 类的段落元素的内容将反映数据结构中 year 属性的值：

{
　　 "title": "Democracy and the Post-Totalitarian Experience",
　　 "author": [
　　　　　{
　　　　　　　 "name": "Leszek Koczanowicz"
　　　　　},
　　　　　{
　　　　　　　 "name": "Beth J. Singer"
　　　　　}
　　 ],
　　 "year": "2005",
　　 "rating": "3",
　　 "location": "Mandalay"
}

上述代码是从服务器返回的JSON数据的一个例子。 title 、 year 、 rating 和 location 属性有单一值，可以直接映射到HTML模板中的一个元素。为了不只一次地重复这些值，就只能将相应的类赋予模板中的其他元素。

author 属性包含一个对象数组。每个对象都有一个属性 name 。用这种方式表示多个作者，说明模板引擎的迭代能力。该模板包含类为 author 的一个列表项元素。列表项包含类为 name 的 <span> 元素。对于数据结构中值为数组的属性，将为数组的每个元素创建一个关联的HTML元素。这样就能创建任意数量的列表项：

(function($) {
　　 $('document').ready(function() {
　　　　　$('#add-book').data('id',1);

一旦文档就绪，JavaScript以使用jQuery data() 函数存储请求的书籍当前 id 开始。这个 id 在每次请求书籍数据时递增。 data() 函数允许在DOM元素中存储任意数据：

$('#add-book').click(function() {
　　 var curId = $(this).data('id');
　　 $.getJSON('server.php', {id: +curId}, function(data) {
　　　　　if( data.none ) { return false; }
　　　　　var divId = 'book-' + curId;
　　　　　$('#book-list').append($('#book-template').clone().attr('id',divId));
　　　　　$('#'+divId).autoRender(data).removeClass('hidden');
　　　　　$('#add-book').data('id', curId + 1);
　　 });
　　 return false;
});

当单击“Add book”按钮时，用jQuery getJSON() 函数向服务器发出请求。模板进程从复制HTML中隐藏的 <div> 开始。在附加到书籍列表之前必须改变这个克隆元素的 id 。如果 id 不变化，则将引入一个没有独特 id 的DOM元素。接着以JSON数据作为参数调用来自Pure插件的 autoRender() 函数，这将使用提供的数据渲染模板。

最后删除 hidden 类，使书籍的细节可见：

　　　　　$('#clear-list').click(function() {
　　　　　　　 $('#add-book').data('id',1);
　　　　　　　 $('#book-list').empty();
　　　　　　　 return false;
　　　　　});
　　 });
})(jQuery);

清除书籍列表的函数相当简单，清空相关的 <div> 元素，将书籍 id 计数器重置为1。

Previous 上一篇本节目录 Next 下一篇

17-解决方案

17.4.2 解决方案

17.4.2　解决方案