主题：介绍MVC中的view和JavaScript的模板
包括以下分支：
1.动态渲染视图的方式
2.模板类库和存储模板的方式
3.数据绑定：让模型与控制器、视图与模型数据、视图数据动态同步连接
1.动态渲染视图的方式
首先是用createElement()来创建DOM元素：
原生JS的DOM操作：
var views = document.getElementById("#view");
views.innerHTML = ""; // 将元素内容清空
var container = document.createElement("div");
container.id = "user";
var name = document.createElement("span");
name.innerHTML = data.name;
container.appendChild(name);
views.appendChild(container);
相应jQuery的DOM操作：
$("#views").empty();
var container = $("<div />").attr({id: "user"});
var name = $("<span />").text(data.name);
$("#views").append(container.append(name));
待渲染的视图内容不多时可以用这种方式。但将视图元素放在控制器或状态里，其实是应用MVC架构的一种妥协办法。
除了以上这种将内容拼接进DOM元素的方式，更推荐将多个静态HTML包含在页面中，在必要的时候显示或隐藏。这会让控制器中所有和视图相关的代码量降到最低（因为只需要控制HTML页面之间的显示或隐藏 ），并且也能根据需要更新元素内容。
比如，创建一个HTML片段用于视图展示：
<div id="views">
<div class="groups"></div>
<div class="user">
<span></span>
</div>
</div>
然后用jQuery更新视图，控制多个元素的显示或隐藏：
$("#views div").hide();
var container = $("#views .user");
container.find("span").text(data.name);
container.show();
这种方式可以让视图和控制器尽可能的分离。
2.模板类库和存储模板的方式
这里使用的是jQuery的模板类库jQuery.tmpl。另外推荐的一个是Mustache。
jQuery.tmpl的主要函数就是jQuery.tmpl()，可以给它传入一个模板和一些数据，这个函数会返回渲染好的元素节点，可以将渲染的结果追加至页面里。如果数据是数组的话，对于数组中的每个数据项都会生成渲染好的模板，否则将只会渲染一个模板。
也就是说，你把数据和模板先写好：
// 数据，这里用一个对象包含
var object = {
url: "http://example.com",
getName: function() {return "Trevor";}
};
// 模板
var template = '<li><a href="${url}">${getName}</a></li>';
然后再传入jQuery.tmpl函数：
var element = jQuery.tmpl(template, object);
// 函数输出的结果：<li><a href="http://example.com">${Trevor}</a></li>
最后再把结果用DOM操作添加进视图：
$("body").append(element);
除了引入变量，模板的另一个重要能力是条件流和迭代。在jQuery.tmpl里，条件流的语法是：
// 条件流
{{if url}}
${url}
{{else}} //else可选
<p>Sorry</p>
{{/if}}
遍历是模板类库的基础功能，使用{{each}}可以遍历任何包括object和array在内的类型。
传入的如果是对象，模板会基于对象的属性遍历；同样，传入为数组的话，则是基于数组的索引做遍历。
迭代的语法：
// 迭代
var object = {
foo: "bar",
messages: ["Hi, there", "Foo bar"]
};
// 在HTML里用模板遍历
<ul>
{{each messages}}
<li>${{$index + 1}}: <em>${{$value}}</em></li>
{{/each}}
</ul>
一个重要的分离思想
在模板里有时候会涉及到一些逻辑判断，字符串处理。这时就要把HTML里的逻辑在JS文件里封装成函数，再在HTML里相应位置调用这个函数。这么做的一个好处是这个函数变成了通用的，其他有相同逻辑的地方就可以重用。
关于模板存储
模板存储方式有：
- 行内形式存储模板
- 使用script标签
- 远程加载
推荐使用script标签来存储模板。
3.数据绑定：让模型与控制器、视图与模型数据、视图数据动态同步连接
本质上，绑定将视图元素和JavaScript对象（通常是模型）挂接在一起。当JS对象（模型）发生改变时，视图会根据新修改后的对象做适时更新。
这意味着当记录发生改变时，你的控制器不必处理视图的更新，因为这些更新都是在后台自动完成的。
网友评论