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

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