2014/08/11 – Backbonejs

標籤：style   blog   http   color   java   使用   os   io   

[來自： 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);

View Code