[来自: 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);
2. 使用 Mustache 模板
(function ($) { //依赖 mustache.js //https://github.com/janl/mustache.js //define ----------------------------- var UserModel = Backbone.Model.extend(); var UserCollection = Backbone.Collection.extend({ model: UserModel }); var UsersView = Backbone.View.extend({ tagName: 'ul', template: "{{# users }}<li><a href='javascript:;' data-id='{{ id }}'>{{ name }}</a></li>{{/ users }}", render: function () { //Mustache.render() 方法先把定义的模板字符串编译成 js 代码执行。{{ ... }} 占位符会被传入的参数二的属性所替代。 /* 预编译模板 template : Mustache.compile([string template]) this.template([options]); */ /* 模板部件 string tmplate :"{{> user }}" Mustache.render([string template], [options], {user: [string userTemplate]}) or Mustache.compilePartial("user",[string userTemplate]) */ $(this.el).html(Mustache.render(this.template, { users: this.collection.toJSON() })); return this; } }); //instance ---------------------------- var usersView = new UsersView({ collection: new UserCollection([ { id: 1, name: "yoyo" }, { id: 4, name: "ramos" }, { id: 7, name: "ronaldo" } ]) }); $(function () { //apply------------------------------- $("body").html(usersView.render().el); }); })(jQuery);
3. 定义表单
(function ($) { //依赖 backbone.forms.js //https://github.com/powmedia/backbone-forms //define ----------------------------------- var UserModel = Backbone.Model.extend({ schema: { title: { type: "Select", options: ["Mr", "Mrs", "Ms"] }, name: "Text", email: { //验证器数组 [可保护字符串,对象,正则,函数] /* 当 form.validate() or form.commit() 方法被调用时会触发 */ /* 重写内置验证提示信息 [可使用Mustache 标签] Backbone.Form.validators.errMessages.required/.match/.emial = ''; */ /* 对模型进行验证 Model.validate() 方法能够返回包含表单元素名称以及对应的错误提示消息的对象。 */ validators: [{ type: "required", message: "Email field is required" }, "email"] }, birthday: "Date" } }); var UserForm = Backbone.View.extend({ tagName: "div", render: function () { /* Backbone.Form() 方法渲染出一个表单 重写 render() 方法扩展 Backbone.View 对象,通过 Model.schema 创建表单。 */ this.form = new Backbone.Form({ model: this.model }); this.$el.html("<h3>Enter buyer details below</h3>"); this.$el.append(this.form.render().el); this.$el.append("<input type='button' value='Submit' />"); return this; }, events: { "click input[type='button']": "submit" }, submit: function () { //向 Model 赋值 [{validate: true} 验证值的有效性] /* 没有模型创建表单 var form = new Backbone.Form({ data:{}, schema:{} }).render(); */ /* 获取表单值 var date = this.form.getValue(); */ this.form.commit({ validate: true }); alert(JSON.stringify(this.model.toJSON())); } }); //instance ------------------------- var userFrom = new UserForm({ model: new UserModel({ title: "Mr", name: "YoYo", email: "yqx_vip@outlook.com", birthday: new Date("2/7/2012") }) }); $(function () { //apply ---------------------- $("body").html(userFrom.render().el); }); })(jQuery);
4. 扩展表单,处理表单事件
(function ($) { //define ------------------------------ var UserModel = Backbone.Model.extend({ schema: { title: { type: "Select", options: ["Mr", "Mrs", "Ms"] }, name: "Text", email: { validators: ["required", "email"] }, birthday: "Date" } }); var UserForm = Backbone.Form.extend({ tagName: "div", initialize: function () { //调用父级方法 /* Backbone.Form 扩展自 Backbone.Views, 并实现了 initialize 和 render 方法,需要调用 */ UserForm.__super__.initialize.apply(this, arguments); //绑定元素事件 this.on("name:blur", this.updateName); }, render: function () { UserForm.__super__.render.apply(this, arguments); return this; }, updateName: function (form, editor) { window.document.title = editor.previousValue; } }); //instance ------------------------------- var userForm = new UserForm({ model: new UserModel({ title: "Mr", name: "YoYo", email: "yqx_vip@outlook.com", birthday: new Date("2/7/2012") }) }); $(function () { //apply ----------------------------- $("body").html(userForm.render().el); }); })(jQuery);
5. 使用 LayoutManager 布局
<script type="template" id="layout"> <div id="divUsers"></div> <div id="divUser"></div> </script> <script type="template" id="userDetailTemplate"> <p><%= user.get('name') %></p> </script> <script type="template" id="usersTemplate"> <ul> <% users.each(function(user){ %> <li> <a href="#user/<%= user.get('id') %>"><%= user.get('name') %></a> </li> <% }); %> </ul> </script>
(function ($) { //依赖 backbone.layoutmanager.js //https://github.com/tbranyen/backbone.layoutmanager //define ------------------------ var UserModel = Backbone.Model.extend({ idAttribute: 'id' }); var UserCollection = Backbone.Collection.extend({ model: UserModel }); var UserView = Backbone.Layout.extend({ template: "#userDetailTemplate", serialize: function () { return { user: this.model }; } }); var UsersView = Backbone.Layout.extend({ template: '#usersTemplate', serialize: function () { return { users: _.chain(this.collection.models) }; } }); var Workspace = Backbone.Router.extend({ routes: { "": "page", "user/:id": "page" }, initialize: function (options) { this.collection = options.collection; }, page: function (id) { if (!id) { id = this.collection.at(0).id; } /* Backbone.LayoutManager 对象实现了模板加载器以及 rander() 方法 */ var layout = new Backbone.Layout({ el: "body", template: '#layout', //指定窗格绑定到的 HTML 元素 views: { "#divUsers": new UsersView({ collection: this.collection }), "#divUser": new UserView({ model: this.collection.get(id) }) } }); layout.render(); } }); $(function () { //instance ---------------- new Workspace({ collection: new UserCollection([ { id: 1, name: "yoyo" }, { id: 4, name: "ramos" }, { id: 7, name: "ronaldo" } ]) }); Backbone.history.start(); }); })(jQuery);
6. 富表格
(function ($) { //依赖 backgrid.js and backgrid.css //selectAll 依赖 backgrid-select-all.js and backgrid-select-all.css //filter 依赖 backgrid-filter.js and backgrid-filter.css //http://backgridjs.com //define ----------------------------------- var UserModel = Backbone.Model.extend(); var UserCollection = Backbone.Collection.extend({ model: UserModel }); $(function () { //instance ----------------------------- var userCollection = new UserCollection([ { id: 1, name: "yoyo", age: new Date("3/12/1986").toString(), status: "male" }, { id: 4, name: "ramos", age: new Date("11/3/1983").toString(), status: "male" }, { id: 7, name: "ronaldo", age: new Date("1/1/1987").toString(), status: "male" } ]); /* Backgrid.Grid 基于 Backbone.View 构建的 */ var grid = new Backgrid.Grid({ /* columns 表格列的定义信息 */ columns: [ { name: "", cell: "select-row", headerCell: "select-all" }, { name: 'id',//模型名称 label: "ID",//列头标签 editable: false,//是否编辑 sortable: true,//是否排序 cell: "number"//单元格类型 [datetime, date, time, number, integer, string, uri, email, boolean, select] }, { name: 'name', label: "Name", cell: "string" }, { name: 'age', label: "Age", cell: "date" }, { name: "status", label: "Status", cell: Backgrid.SelectCell.extend({//扩展类型累 optionValues: [ ["Male", "male"], ["Female", "female"] ] }) } ], collection: userCollection }); //apply ---------------- $("body").html(grid.render().el); $("body").append("<input type='button' value='delete' class='btnSelected' />"); $("input.btnSelected").click(function () { _.each(grid.getSelectedModels(), function (model) { grid.collection.remove(model); //model.destroy();//call Backbone.sync }); }); //添加 filter var elFilter = new Backgrid.Extension.ClientSideFilter({ collection: userCollection, placeholder: "Search by Name", fields: ["name"], wait: 150 }); $("body").append(elFilter.render().el); }); })(jQuery);