首页 > Web开发 > 详细

2014/08/11 – Backbonejs

时间:2014-08-11 17:29:52      阅读:352      评论:0      收藏:0      [点我收藏+]

[来自: Backbone.js 开发秘笈 第6章]

Template 用法:

通过 Underscore.js 提供的 _.template() 方法,我们可使用 <% ... %> 包含js代码;使用 <%= ... %> 输出变量值;使用 <%- ... %>输出转义后的变量值。

(function ($) {
    //define -------------------------
    var UserModel = Backbone.Model.extend();
    var UserCollection = Backbone.Collection.extend({
        model: UserModel
    });
    var UsersView = Backbone.View.extend({
        tagName: ‘ul‘,
        //用默认 Underscore 的 _.template() 方法定义模板
        template: _.template("<% _.each(users,function(user){%>" +
            "<li><a hre=‘javascript:;‘ data-id=‘<%= user.id %>‘><%= user.name %></a></li>"
            + "<%}); %>"),
        render: function () {
            //调用模板对象获取生成的 HTML
            $(this.el).html(this.template({
                users: this.collection.toJSON()
            }));
            return this;
        }
    });
    //instance -----------------------------
    var usersView = new UsersView({
        collection: new UserCollection([
            { id: 1, name: ‘yoyo‘ },
            { id: 7, name: ‘ronaldo‘ },
            { id: 4, name: ‘ramos‘ }
        ])
    });
    //apply -------------------------------
    $(function () {
        $(‘body‘).html(usersView.render().el);
    });

})(jQuery);

1. 模板加载器

模板元素:<script type="text/template" id="userTemplate">...</script>

bubuko.com,布布扣
(function ($, win, undefined) {
    $(function () {
        //define -------------------------------------------------------
        var $templates = {};
        $("script[type=‘text/template‘]").each(function () {
            $templates[$(this).attr(‘id‘)] = _.template($(this).html());
            $(this).remove();
        });
        $.tempates = $.tempates || $templates;
        //apply ---------------------------------------------------------
        $(‘body‘).html("<ul>" + $.tempates.userTemplate({ id: 1, name: ‘yoyo‘ }) + "</ul>");
    });
})(jQuery, window);
View Code

 

2014/08/11 – Backbonejs,布布扣,bubuko.com

2014/08/11 – Backbonejs

原文:http://www.cnblogs.com/yoyoone23/p/3905126.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!