Underscore.js-template模板

本文详细介绍了Underscore框架的模板绑定功能,包括如何在HTML中设定模板并使用JavaScript绑定数据,实现避免在JS中大量使用HTML标签的目的。通过一个简单示例,展示了如何将数据渲染成HTML,并在数据更新时自动更新页面。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值