JQuery模板 ：(六）JsViews - 基于JsRender并具有动态绑定功能的模板
<!DOCTYPE html><html><head> <link href="http://www.jsviews.com/samples/resources/css/samples.css" rel="stylesheet"/> <script src="../jquery/jquery-2.0.3.js"></script> <script src="../jsviews/jsviews.js"></script></head><body><table><tbody id="peopleList"></tbody></table><script id="peopleTmpl" type="text/x-jsrender"> <tr><td> <ul> {{for p}} <li> {{:name}} </li> {{/for}} </ul> </td></tr></script><script>var myTemplate = $.templates("#peopleTmpl");var people = [ { name: "JoshWang" }, { name: "WangSheng" } ];var app = { p: people };myTemplate.link("#peopleList", app);</script></body></html>
?说明：很容易看出这个例子和之前的JsRender sample的例子是极其类似的。唯一不同地方是，之前用于渲染template数据的两行代码现在只有一行代码即可。
?
var html = myTemplate.render(app);$("#peopleList").html(html);<!DOCTYPE html><html><head> <link href="http://www.jsviews.com/samples/resources/css/samples.css" rel="stylesheet"/> <script src="../jquery/jquery-2.0.3.js"></script> <script src="../jsviews/jsviews.js"></script></head><body><table><tbody id="peopleList"></tbody></table><script id="peopleTmpl" type="text/x-jsrender"> <tr><td> <button id="addBtn">Add</button> </td></tr> {^{for p}} <tr><td> {{:name}} </td></tr> {{/for}}</script><script>var myTemplate = $.templates("#peopleTmpl");var people = [ { name: "JoshWang" }, { name: "WangSheng" } ];var app = { p: people };var html = myTemplate.link("#peopleList", app);$("#addBtn").on("click", function(){ $.observable(people).insert(people.length, {name: "newName"});})</script></body></html>?
?
代码说明：点击Add按钮，会添加一条记录到Array中，然后该template就会自动更新并显示出新加的这一行。使用的code是：$.observable(people).insert(people.length, {name: "name"});
但是需要注意的是这个template和之前的template所有不同，{^{for ...}}。如果去掉^，然后重新点击Add Button后，你会发现没有任何的变化。这是因为任何的常规的JsRender 的标签：{{someTag...}}，无论是内置的还是自定义的，都可以通过添加^变成一个数据绑定标签：{^{some Tag...}}.换句话说，这样的标签就变成了动态的标签，当无论何时需要的哦时候，都会自动的的去重新渲染它（如果相关的数据发生变化时）。
? ? ? ? 简言之：^这样的标签是动态的可用于动态绑定的标签，而没有^的标签是死的标签，不能用于数据绑定。
?
实例2： 可视的变化：属性变化。（可视表示属性发生变化时，绑定的template也会自动刷新）
?
<!DOCTYPE html><html><head> <link href="http://www.jsviews.com/samples/resources/css/samples.css" rel="stylesheet"/> <script src="../jquery/jquery-2.0.3.js"></script> <script src="../jsviews/jsviews.js"></script></head><body><table><tbody id="peopleList"></tbody></table><script id="peopleTmpl" type="text/x-jsrender"> <tr><td colspan="2"> <button id="addBtn">Add</button> </td></tr> {^{for p}} <tr> <td>{^{:name}}</td> <td> <button name="code"><td>{^{:name}}</td>具有相关的效果。
?
4. 双向的数据绑定：
<td data-link="name"></td><td> <input data-link="name"/></td>
<input>和<td>都是数据绑定的，这使得不需要向实例2中那样添加一个propertyChange(属性变化）来使得template同时发生变化。
<!DOCTYPE html><html><head> <link href="http://www.jsviews.com/samples/resources/css/samples.css" rel="stylesheet"/> <script src="../jquery/jquery-2.0.3.js"></script> <script src="../jsviews/jsviews.js"></script></head><body><table><tbody id="peopleList"></tbody></table><script id="peopleTmpl" type="text/x-jsrender"> <tr><td colspan="2"> <button id="addBtn">Add</button> </td></tr> {^{for people}} <tr> <td data-link="name"></td> <td> <input data-link="name"/> </td> </tr> {{/for}}</script><script>var myTemplate = $.templates("#peopleTmpl");var people = [ { name: "JoshWang" }, { name: "WangSheng" } ];var app = { people: people };var counter = 1;myTemplate.link("#peopleList", app);$("#addBtn").on("click", function() { $.observable(people).insert(people.length, {name: "name"});})</script></body></html>?
5. 更加完整的例子：（在Select标签上使用数据绑定）
<!DOCTYPE html><html><head> <link href="http://www.jsviews.com/samples/resources/css/samples.css" rel="stylesheet"/> <script src="../jquery/jquery-2.0.3.js"></script> <script src="../jsviews/jsviews.js"></script></head><body><table><tbody id="peopleList"></tbody></table><script id="peopleTmpl" type="text/x-jsrender"> <tr><td> <button id="addBtn">Add</button> <button id="removeBtn" data-link="disabled{:selectedID === '0'}">Remove</button> </td></tr> <tr><td> <select data-link="selectedID" size="5"> <option value="0">Choose a person to edit</option> {^{for people}} <option data-link="{:name} value{:ID} selected{:ID === ~root.selectedID}"></option> {{/for}} </select> </td></tr> <tr><td> <label>Name:<input data-link="{:selected().name:} disabled{:selectedID === '0'}" /></label> <label>Nickname:<input data-link="{:selected().nickname:} disabled{:selectedID === '0'}" /></label> </td></tr> <tr><td + counter++; $.observable(people).insert(people.length, {ID: newID, name: "name"}); $.observable(app).setProperty("selectedID", newID);})$("#removeBtn").on("click", function(){ $.observable(people).remove($.inArray(app.selected(), people)); $.observable(app).setProperty("selectedID", "0");})</script></body></html>?
运行效果图：
?
三、综合实例
1. 动态绑定：所谓动态绑定就是当数据源发生变化时，与数据源绑定的组件也会动态的刷新。
?
<!DOCTYPE html><html><head> <link href="http://www.jsviews.com/samples/resources/css/samples.css" rel="stylesheet"/> <script src="../jquery/jquery-2.0.3.js"></script> <script src="../jsviews/jsviews.js"></script></head><body><div id="result"></div><script id="theTmpl" type="text/x-jsrender"><div> Edit: <input type="checkbox" data-link="editable"/> <em>Name:</em> {^{:name}} {^{if showNickname && nickname}} (Goes by <em data-link="nickname"></em>) {{/if}} {^{if editable}} <div> <input data-link="name"/> <input data-link="nickname"/> <input type="checkbox" data-link="showNickname"/> </div> {{/if}}</div></script><script>var data = [ { "name": "JoshWang", "nickname": "DW", "showNickname": true }, { "name": "Susan", "nickname": "Sue", "showNickname": false }];var template = $.templates("#theTmpl");template.link("#result", data);</script></body></html>?
?
代码解读
1）{^{name}} ... {^{if showNickname && nickname}}.这些标签是数据绑定标签，当与之关联的数据发生变化时，在template中相关的数据单元也会自动的发生变化。
2）将{{if...}}改成{^{if...}}同样是数据绑定。当关联的数据发生变化时，整个template部分的内容会自动的移除或者是重新插入。
3）<em data-link="nickname">： 同样可使用element-based来做数据绑定，这里表示<em>标签的文本内容会自动的绑定到nickName的值。
4）?<input data-link="name"/>：这里 input会一双重绑定的方式自动的绑定到相关联数据的name属性。在这里，当修改input text box中的值的时候，相关的关联数据也会自动的更新，二该template的其他data-linked到同样属性(name)的部分也会立即自动的更新。