2014/08/11 – Backbonejs

浏览数：44 / 时间：2015年06月09日

[来自： 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>

(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);