首页 > 代码库 > 2014/08/11 – Backbonejs
2014/08/11 – Backbonejs
[来自： 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);
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。