http://learning.github.io/underscore/
Underscore这个框架除了很好的处理数据意外,还有一个很棒的功能,就是模版绑定。
在html里面设定模板,然后js绑定数据,这样能避免在js中出现非常多的html标签。
相比knockout.js,更加轻量级一些,当然功能也相对简单一些
下面是一个最简单的例子:
<!-- 用于显示渲染后的标签 -->
<ul id="element"></ul>
<!-- 定义模板,将模板内容放到一个script标签中 -->
<script type="text/template" id="tpl">
<% for(var i = 0; i < list.length; i++) { %>
<% var item = list[i] %>
<li>
<span><%=item.firstName%> <%=item.lastName%></span>
<span><%-item.city%></span>
</li>
<% } %>
</script>
<script type="text/javascript" src="underscore/underscore-min.js"></script>
<script type="text/javascript">
// 获取渲染元素和模板内容
var element = $('#element'),
tpl = $('#tpl').html();
// 创建数据, 这些数据可能是你从服务器获取的
var data = {
list: [
{firstName: '<a href="#">Zhang</a>', lastName: 'San', city: 'Shanghai'},
{firstName: 'Li', lastName: 'Si', city: '<a href="#">Beijing</a>'},
{firstName: 'Wang', lastName: 'Wu', city: 'Guangzhou'},
{firstName: 'Zhao', lastName: 'Liu', city: 'Shenzhen'}
]
}
// 解析模板, 返回解析后的内容
var html = _.template(tpl, data);
// 将解析后的内容填充到渲染元素
element.html(html);
</script>
当模板中的内容需要更新是,例如分页或者新的ajax请求绑定新内容,就需要改动一些代码
最后两句修改为:
// 解析模板, 返回解析后的内容
var render = _.template(tpl);
var html = render(data);
// 将解析后的内容填充到渲染元素
element.html(html);
我们可以在修改script
<!-- 用于显示渲染后的标签 -->
<ul id="element"></ul>
<!-- 定义模板,将模板内容放到一个script标签中 -->
<script type="text/template" id="tpl">
<% for(var i = 0; i < list.length; i++) { %>
<% var item = list[i] %>
<li>
<span><%=item.firstName%> <%=item.lastName%></span>
<span><%-item.city%></span>
</li>
<% } %>
</script>
<script type="text/javascript" src="underscore/underscore-min.js"></script>
<script type="text/javascript">
// 获取渲染元素和模板内容
var element = $('#element'),
tpl = $('#tpl').html();
// 创建数据, 这些数据可能是你从服务器获取的
var data = {
list: [
{firstName: '<a href="#">Zhang</a>', lastName: 'San', city: 'Shanghai'},
{firstName: 'Li', lastName: 'Si', city: '<a href="#">Beijing</a>'},
{firstName: 'Wang', lastName: 'Wu', city: 'Guangzhou'},
{firstName: 'Zhao', lastName: 'Liu', city: 'Shenzhen'}
]
}
var render = _.template(tpl);
var html = render(data);
// 将解析后的内容填充到渲染元素
element.html(html);
// 更新的数据
var data2 = {
list: [
{firstName: '<a href="#">tang</a>', lastName: 'San', city: 'Shanghai'},
{firstName: 'Li', lastName: 'Si', city: '<a href="#">Beijing</a>'},
{firstName: 'Wang', lastName: 'Wu', city: 'Guangzhou'},
{firstName: 'Zhao', lastName: 'Liu', city: 'Shenzhen'}
]
}
var html = render(data2);
// 将解析后的内容填充到渲染元素
element.html(html);
</script>
这时页面就会被后面的data2更新
文章参考与:http://yujianshenbing.iteye.com/blog/1748452