Underscore.js-template模板

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