2014/08/07 – Backbonejs

[来自：Backbone.js 开发秘笈 第4章]

View API:

(function ($) {
    //define -----------------------
    var ViewS = Backbone.View.extend({
        el: 'body',//可以用参数的方式从对象外部传人任意的视图的标准属性
        initialize: function () {
            this.html = '<p id="testCode">initialize</p>';
        },
        render: function () {
            $(this.el).html(this.html);
        }
    });

    //创建新元素
    var ViewNew = Backbone.View.extend({
        tagName: 'p',//元素类型
        className: 'c-test',
        attributes: {
            align: 'left'
        },
        initialize: function () {
            this.html = 'pTest';
        },
        render: function () {
            $(this.el).html(this.html);
        }
    });

    //根据模型渲染
    var ModelV = Backbone.Model.extend();
    var CollectionV = Backbone.Collection.extend({ model: ModelV });
    var ViewM = Backbone.View.extend({
        tagName: 'p',
        render: function () {
            //this.model 传入的模型
            $(this.el).html(this.model.get('fullName'));
        }
    });
    var ViewC = Backbone.View.extend({
        tagName: 'ul',
        render: function () {
            var lis = "";
            //this.collection 传入的集合
            _.each(this.collection.models, function (model, index, list) {
                lis += "<li>" + model.get('fullName') + "</li>";
            });
            $(this.el).html(lis);
        }
    });

    $(function () {
        //instance -------------------------

        /*注： $el为实力内部的jquery对象
            Backbone.$ 变量中设置一个对于 jQuery (或 Zepto, Ender) 的引用*/

        var viewInstance = new ViewS();

        //apply ----------------------------    
        viewInstance.render();
        //创建元素
        var viewNew = new ViewNew();
        viewNew.render();
        $('body').append(viewNew.el);
        //改变视图元素
        viewNew.setElement($("#testCode"));
        $('body').append(viewNew.el);
        //移除视图
        viewNew.remove();
        //传人模型进行渲染
        var viewModel = new ViewM({
            model: new ModelV({ fullName: 'YOYO' })//传人 Model 模型对象
        });
        viewModel.render();
        $('body').append(viewModel.el);
        //集合渲染
        var collectionInstance = new CollectionV([
            { fullName: '123' },
            { fullName: '456' },
            { fullName: '789' }
        ]);
        var viewCollection = new ViewC({
            collection: collectionInstance
        });
        viewCollection.render();
        $('body').append(viewCollection.el);
    });

})(jQuery);

1. 拆分子视图实例

(function ($) {
    //define -------------------------------
    var User = Backbone.Model.extend({
        defaults: {
            id: 0,
            name: '',
            age: 0
        }
    });
    var UserColection = Backbone.Collection.extend({
        model: User
    });
    var UserItemView = Backbone.View.extend({
        tagName: 'tr',
        renderViewMode: function () {
            $(this.el).html("><td>" + this.model.get('id') + "</td><td>" + this.model.get('name') + "</td><td>" + this.model.get('age') + "</td><td><input type='button' class='edit' value='Edit' /></td>");
            return this;
        },
        renderEditMode: function () {
            $(this.el).html("><td><input type='textbox' value='" + this.model.get('id') + "' /></td><td><input type='textbox' value='" + this.model.get('name') + "'/></td><td><input type='textbox' value='" + this.model.get('age') + "'/></td><td><input type='button' class='save' value='Save' /><input type='button' class='cancel' value='Cancel' /></td>");
            return this;
        },
        renderCallback: 'renderViewMode',
        render: function () {
            return this[this.renderCallback]();
        },
        events: {//View 事件绑定
            /* 手动建立和取消事件委托 delegateEvents() undelegateEvents() */
            'click input.edit': 'edit',
            'click input.save': 'save',
            'click input.cancel': 'cancel'
        },
        edit: function () {
            this.renderCallback = 'renderEditMode';
            this.render();
        },
        save: function () {

            var text = $(this.el).find("input[type = 'textbox']");
            /*
            this.model.set('id', parseInt(text[0].value, 10));
            this.model.set('name', text[1].value);
            this.model.set('age', parseInt(text[2].value, 10));
            */
            this.model.set({
                id: parseInt(text[0].value, 10),
                name: text[1].value,
                age: parseInt(text[2].value, 10)
            });

            this.renderCallback = 'renderViewMode';
            this.render();
        },
        cancel: function () {
            this.renderCallback = 'renderViewMode';
            this.render();
        }
    });
    var UserView = Backbone.View.extend({
        tagName: 'table',
        render: function () {
            $(this.el).append($("<tr></tr>").html(_.map(["ID", "Name", "Age"], function (value) {
                return "<th>" + value + "</th>";
            })));
            $(this.el).append(_.map(this.collection.models, function (model) {
                return new UserItemView({ model: model }).render().el;
            }));
            return this;
        }
    });
    var ShowView = Backbone.View.extend({
        el: 'body',
        render: function () {
            $(this.el).html(new UserView({ collection: this.collection }).render().el);
        }
    });

    $(function () {

        //instance -----------------------------------------------------
        var showView = new ShowView({
            collection: new UserColection([
                { id: 1, name: 'Yo Yo', age: 28 },
                { id: 2, name: 'Ramash', age: 81 },
                { id: 3, name: 'Coder Lee', age: 29 }
            ])
        });
        //apply ---------------------------------------
        showView.render();

    });
})(jQuery);

2. 视图切换实例

(function ($) {
    //define ---------------------------
    var UserMode = Backbone.Model.extend({
        idAttribute: 'id'
    });
    var UserCollection = Backbone.Collection.extend({ model: UserMode });
    var UserView = Backbone.View.extend({
        tagName: 'p',
        render: function () {
            $(this.el).html(this.model.get('id') + ' ' + this.model.get('name') +" <a href='#'>go back</a>");
            return this;
        }
    });
    var UserListView = Backbone.View.extend({
        tagName: 'ul',
        render: function () {
            $(this.el).html(_.map(this.collection.models, function (model) {
                return "<li><a href='#user/" + model.get('id') + "'>" + model.get('name') + "</a></li>";
            }));
            return this;
        }
    });
    //定义路由
    var Workspace = Backbone.Router.extend({
        routes: {
            '': 'userListRoute',
            'uList': 'userListRoute',
            'user/:id': 'userRoute'
        },
        initialize: function () {
            this.collection = new UserCollection([
                { id: 0, name: 'abc' },
                { id: 1, name: 'def' },
                { id: 2, name: 'opq' }
            ]);
        },
        userListRoute: function () {
            this.changeView(new UserListView({ collection: this.collection }));
        },
        userRoute: function (id) {
            this.changeView(new UserView({ model: this.collection.get(parseInt(id, 10)) }));
        },
        changeView: function (view) {
            if (this.currentView) {
                if (this.currentView === view) {
                    return;
                }
                this.currentView.remove();//移除之前视图，防止内存泄露
            }
            $('body').append(view.render().el);
            this.currentView = view;
        }
    });
    //instance and apply -----------------------
    $(function () {
        new Workspace();
        Backbone.history.start();//支持 HTML 的 pushState() 方法和 URL 散列
        //Backbone.history.navigate(fragment, options); //导航
    });
})(jQuery);