Backbone入门之视图(Backbone.View)

<a href="http://blog.codingplayboy.com/?p=227">上一篇介绍了Backbone集合</a>，本篇将介绍Backbone视图。

Backbone视图可以使用JavaScript模板，根据模型数据的逻辑处理向用户展示相应的界面。可以监听模型的change事件，并在回调函数绑定视图的render()方法，就可以在不重绘整个页面的情况下，更新视图。

可以通过扩展Backbone.View对象创建一个视图：


    var app = app || {};
    app.MenuListView = Backbone.View.extend({
        tagName: 'ul',
        className: 'menu-list',
        template: function() {
            return _.template('<li><%= title %></li>');
        }, 
        render: function() {
            this.$el.html(this.template()({title: "Menu List"}));
            return this;
        },
        initialize: function() {
            this.render();
            $('body').append(this.$el);
        }
    });
    app.menulist = new app.MenuListView();
    console.log(app.menulist.el);
    console.log(app.menulist.$el);

打印值如下：

app.menulist.el:

app.menulist.el

app.menulist.$el:

app.menulist.$el

如果视图定义了initialize()初始化函数，在创建视图时，它将立即被调用。

<h3>视图与模型</h3>

创建视图时，可以通过传入model或collection属性和值，将某一模型或集合直接注册到视图中：


    var app = app || {};
    app.MenuModel = Backbone.Model.extend({
        defaults: {
            title: 'this is a menu',
            status: 'inactive'
        }
     });
     app.MenuCollection = Backbone.Collection.extend({
        model: app.MenuModel,
        initialize: function() {
            console.log('集合初始化成功');
        }
    });
    var menus = [
        {
            id: 1,
            name: '最近会话',
            status: 'active'
        },
        {
            id: 2,
            name: '通讯录',
            status: 'inactive'
        }
    ]
    app.menus = new app.MenuCollection(menus);
    app.MenuListView = Backbone.View.extend({
        tagName: 'ul',
        className: 'menu-list',
        template: function() {
            return _.template('<li><%= title %></li>');
        }, 
        render: function() {
            this.$el.html(this.template()({title: "Menu List"}));
            return this;
        },
        initialize: function() {
            //console.log('视图初始化');
            this.render();
            $('body').append(this.$el);
        }
    });
    app.menulist = new app.MenuListView({
        collection: app.menus
    });
    console.log(app.menulist.collection);

打印如下：

app.menulist.collection

<h2>视图与DOM</h2>

我们希望通过使用Backbone视图生成页面文档，将页面展示给用户，就必须将视图与DOM关联起来，通过操作视图改变DOM。

<ul>
<li>Backbone提供两种方式关联视图和DOM:

<ul>
<li>创建

创建视图时创建一个新元素，然后将该元素插入至DOM。</li>
<li>引用

视图直接引用页面已经存在的元素。</li>
</ul></li>
<li>创建

Backbone视图创建元素时只需要使用tagName、id、className属性。此Backbone视图对象的el属性是一个指向该元素的引用。

tagName默认值为div。


    app.MenuListView = Backbone.View.extend({
        tagName: 'ul', //元素标签类型，必选，未设置时默认为div
        className: 'menu-list', //元素class，可选
        id: 'menus', //元素id，可选
        initialize: function() {
            $('body').append(this.$el);
        }
    });
    app.menulist = new app.MenuListView();
    console.log(app.menulist.el);
    //logs: <ul id="menus" class="menu-list"></ul>

注：此时Backbone视图生成的元素并没有插入到文档DOM。</li>
<li>引用

可以为Backbone视图对象传入一个el属性，来匹配页面文档已存在的元素。


    app.MenuListView = Backbone.View.extend({
        el: 'body', //值为CSS选择器
        initialize: function() {
        }
    });
    app.menulist = new app.MenuListView();
    console.log(app.menulist.el);
    //logs: <body>...</body>

我们也可以在创建视图时，为对象el属性设置值：


    app.menulist = new app.MenuListView({el: 'body'});

el属性值为CSS选择器，Backbone视图对象将根据此选择器匹配页面元素。</li>
</ul>

<h2>视图属性与方法</h2>

要深入理解Backbone视图，必须理解视图一些重要的属性和方法。

<ul>
<li>el

el是视图的一个核心属性，也是使用视图对象时必然会用到的一个属性。

<blockquote>
el是DOM元素的一个引用，所有视图都有其el属性。视图可以通过使用el构成它的元素内容，在触发浏览器最少次数重排和重绘的情况下，将所有内容一次性插入文档DOM。
</blockquote></li>
<li>$el、$()

对视图和DOM操作，经常要用到jQuery函数，Backbone通过为视图定义$el属性和$()函数，为我们操作视图和DOM提供了很多便利。视图的$el属性等价于$(View.el)，$(selector)等价于$(View.el).find(selector)。</li>
<li>setElement()

Backbone提供setElement()方法，支持将现有Backbone视图应用于不同的DOM元素，调用该方法将创建一个缓存$el引用，并且将视图委托事件从旧元素移动到新元素。


    var MyView = Backbone.View.extend({
        events: {
            click: function(e) {
                console.log(myView.$el.html());
            }
        }
    });
    var btn1 = $('<button>button 1</button>');
    var btn2 = $('<button>button 2</button>');

    //视图元素el是btn1
    var myView = new MyView({el: btn1});

    btn1.trigger('click');  //logs: button 1

    //视图元素el指向btn2
    myView.setElement(btn2);

    btn1.trigger('click');
    btn2.trigger('click'); //logs: button 2
    console.log(myView.$el.html);// button 2

</li>
</ul>

<h2>渲染模板-render()</h2>

render()函数是一个可选函数，需要我们主动调用，通常我们在里面实现根据模型属性渲染视图模板，生成HTML标记；然后使用el或$el属性，将这些HTML标记设置为视图的el属性所引用的 DOM元素的HTML内容。


    app.MenuModel = Backbone.Model.extend({
        defaults: {
            title: 'this is a menu',
            status: 'inactive'
        }
       });
    app.MenuCollection = Backbone.Collection.extend({
        model: app.MenuModel,
        initialize: function() {
            console.log('集合初始化成功');
            this.on('reset', function(cols, options) {
                console.log('重置集合');
            }, this);
            this.on('add', function(model) {
                console.log('添加模型，cid： ' + model.cid);
            });
             this.on('change', function(model) {
                console.log('模型属性改变为: ' + model.get('name'), model);
            });
            this.on('change:name', function(model) {
                console.log('模型name属性改变为: ' + model.get('name'));
            });
            this.on('remove', function(model) {
                console.log('移除模型: ' + model.cid);
            });
        }
    });
    var menus = [
        {
            id: 1,
            name: '最近会话',
            status: 'active'
        },
        {
            id: 2,
            name: '通讯录',
            status: 'inactive'
        }
    ]
    app.menus = new app.MenuCollection(menus);
    app.MenuItemView = Backbone.View.extend({
        tagName: 'li',
        className: 'menu-item',
        template: function() {
            return _.template('<a title="<%= title %>"><%= name %></a>');
        },
        render: function() {
            this.$el.html(this.template()(this.model.toJSON()));
            return this;
        }
    }); 
    app.MenuListView = Backbone.View.extend({
        tagName: 'ul',
        className: 'menu-list',
        template: function() {
            return _.template('');
        }, 
        render: function() {
            //遍历集合，集合中每个模型对应一个菜单项
            _.each(this.collection.models, function(model) {
                //为每个集合模型，创建一个新菜单项视图实例
                var menuItemView = new app.MenuItemView({model: model});
                //在父视图-菜单列表视图中添加子菜单-菜单项视图
                this.$el.append(menuItemView.render().el);
            }, this);
            console.log(this.el);
            return this;
        },
        initialize: function() {
            this.render();
            $('body').append(this.$el);
        }
    });
    app.menulistview = new app.MenuListView({
        collection: app.menus
    });

控制台打印值如下：

this.el

页面效果如图：

页面效果图

我们通常在render()函数底部返回this以开启链式调用，该视图可以在其他父视图里被重用。

<h2>Events对象</h2>

Backbone提供events对象支持我们通过设置在el下的自定义CSS选择器、事件类型和事件监听器，为DOM元素绑定事件。


    app.MenuItemView = Backbone.View.extend({
        tagName: 'li',
        className: 'menu-item',
        events: {
            'click .menu': 'openMenu',
            'dblclick .menu': 'edit'
        },
        template: function() {
            return _.template('<a class="menu" title="<%= title %>"><%= name %></a>');
        },
        render: function() {
            this.$el.html(this.template()(this.model.toJSON()));
            return this;
        },
        initialize: function() {
            this.dbltimer = null;
        },
        openMenu: function(e) {
            if (this.dbltimer) {
                clearTimeout(this.dbltimer);
                this.dbltimer = null;
            }
            this.dbltimer = setTimeout(function(){ 
                console.log('opened');
            },300);
        },
        edit: function(e) {
            if (this.dbltimer) {
                clearTimeout(this.dbltimer);
                this.dbltimer = null;
            }
            console.log('edit');
        }
    }); 
    app.MenuListView = Backbone.View.extend({
        tagName: 'ul',
        className: 'menu-list',
        template: function() {
            return _.template('');
        }, 
        render: function() {
            _.each(this.collection.models, function(model) {
                var menuItemView = new app.MenuItemView({model: model});
                this.$el.append(menuItemView.render().el);
            }, this);
            // this.$el.html(this.template()({title: "Menu List"}));
            console.log(this.el);
            return this;
        },
        initialize: function() {
            this.render();
            $('body').append(this.$el);
        }
    });
    app.menulistview = new app.MenuListView({
        collection: app.menus
    });

若没有设置CSS选择器，则默认为el所引用DOM元素绑定事件。

<h2>移除视图-remove()</h2>

调用View.remove()，从DOM中移除一个视图。同时将调用stopListening来移除通过 listenTo绑定在视图上的所有事件。


    app.menulistview.remove();

以上是对Backbone视图的回顾与总结，下一篇将介绍<a href="http://blog.codingplayboy.com/?p=258">Backbone事件</a>。

最后编辑于：2017.12.05 05:08:50

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 161,601评论 4赞 369
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 68,367评论 1赞 305
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 111,249评论 0赞 254
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 44,539评论 0赞 217
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,967评论 3赞 295
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,929评论 1赞 224
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 32,098评论 2赞 317
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,825评论 0赞 207
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,609评论 1赞 249
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,796评论 2赞 253
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,282评论 1赞 265
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,603评论 3赞 261
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 33,277评论 3赞 242
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,159评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,959评论 0赞 201
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 36,079评论 2赞 285
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,874评论 2赞 277

Backbone入门之视图(Backbone.View)

推荐阅读更多精彩内容