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

(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]}) orMustache.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);

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

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

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

(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
            });});//添加 filtervar elFilter = new Backgrid.Extension.ClientSideFilter({collection: userCollection,placeholder: "Search by Name",fields: ["name"],wait: 150});$("body").append(elFilter.render().el);});
})(jQuery);