啊啊啊啊亚洲无,成人αV福利专区,午夜成人91精品久久

<a >上一篇介紹了Backbone集合</a>，本篇將介紹Backbone視圖。

Backbone視圖可以使用JavaScript模板，根據(jù)模型數(shù)據(jù)的邏輯處理向用戶展示相應(yīng)的界面。可以監(jiān)聽(tīng)模型的change事件，并在回調(diào)函數(shù)綁定視圖的render()方法，就可以在不重繪整個(gè)頁(yè)面的情況下，更新視圖。

<h2>創(chuàng)建視圖</h2>

可以通過(guò)擴(kuò)展Backbone.View對(duì)象創(chuàng)建一個(gè)視圖：


    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()初始化函數(shù)，在創(chuàng)建視圖時(shí)，它將立即被調(diào)用。

<h3>視圖與模型</h3>

創(chuàng)建視圖時(shí)，可以通過(guò)傳入model或collection屬性和值，將某一模型或集合直接注冊(cè)到視圖中：


    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: '最近會(huì)話',
            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>

我們希望通過(guò)使用Backbone視圖生成頁(yè)面文檔，將頁(yè)面展示給用戶，就必須將視圖與DOM關(guān)聯(lián)起來(lái)，通過(guò)操作視圖改變DOM。

<ul>
<li>Backbone提供兩種方式關(guān)聯(lián)視圖和DOM:

<ul>
<li>創(chuàng)建

創(chuàng)建視圖時(shí)創(chuàng)建一個(gè)新元素，然后將該元素插入至DOM。</li>
<li>引用

視圖直接引用頁(yè)面已經(jīng)存在的元素。</li>
</ul></li>
<li>創(chuàng)建

Backbone視圖創(chuàng)建元素時(shí)只需要使用tagName、id、className屬性。此Backbone視圖對(duì)象的el屬性是一個(gè)指向該元素的引用。

tagName默認(rèn)值為div。


    app.MenuListView = Backbone.View.extend({
        tagName: 'ul', //元素標(biāo)簽類型，必選，未設(shè)置時(shí)默認(rèn)為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>

注：此時(shí)Backbone視圖生成的元素并沒(méi)有插入到文檔DOM。</li>
<li>引用

可以為Backbone視圖對(duì)象傳入一個(gè)el屬性，來(lái)匹配頁(yè)面文檔已存在的元素。


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

我們也可以在創(chuàng)建視圖時(shí)，為對(duì)象el屬性設(shè)置值：


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

el屬性值為CSS選擇器，Backbone視圖對(duì)象將根據(jù)此選擇器匹配頁(yè)面元素。</li>
</ul>

<h2>視圖屬性與方法</h2>

要深入理解Backbone視圖，必須理解視圖一些重要的屬性和方法。

<ul>
<li>el

el是視圖的一個(gè)核心屬性，也是使用視圖對(duì)象時(shí)必然會(huì)用到的一個(gè)屬性。

<blockquote>
el是DOM元素的一個(gè)引用，所有視圖都有其el屬性。視圖可以通過(guò)使用el構(gòu)成它的元素內(nèi)容，在觸發(fā)瀏覽器最少次數(shù)重排和重繪的情況下，將所有內(nèi)容一次性插入文檔DOM。
</blockquote></li>
<li>$el、$()

對(duì)視圖和DOM操作，經(jīng)常要用到j(luò)Query函數(shù)，Backbone通過(guò)為視圖定義$el屬性和$()函數(shù)，為我們操作視圖和DOM提供了很多便利。視圖的$el屬性等價(jià)于$(View.el)，$(selector)等價(jià)于$(View.el).find(selector)。</li>
<li>setElement()

Backbone提供setElement()方法，支持將現(xiàn)有Backbone視圖應(yīng)用于不同的DOM元素，調(diào)用該方法將創(chuàng)建一個(gè)緩存$el引用，并且將視圖委托事件從舊元素移動(dòng)到新元素。


    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()函數(shù)是一個(gè)可選函數(shù)，需要我們主動(dòng)調(diào)用，通常我們?cè)诶锩鎸?shí)現(xiàn)根據(jù)模型屬性渲染視圖模板，生成HTML標(biāo)記；然后使用el或$el屬性，將這些HTML標(biāo)記設(shè)置為視圖的el屬性所引用的 DOM元素的HTML內(nèi)容。


    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('模型屬性改變?yōu)? ' + model.get('name'), model);
            });
            this.on('change:name', function(model) {
                console.log('模型name屬性改變?yōu)? ' + model.get('name'));
            });
            this.on('remove', function(model) {
                console.log('移除模型: ' + model.cid);
            });
        }
    });
    var menus = [
        {
            id: 1,
            name: '最近會(huì)話',
            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() {
            //遍歷集合，集合中每個(gè)模型對(duì)應(yīng)一個(gè)菜單項(xiàng)
            _.each(this.collection.models, function(model) {
                //為每個(gè)集合模型，創(chuàng)建一個(gè)新菜單項(xiàng)視圖實(shí)例
                var menuItemView = new app.MenuItemView({model: model});
                //在父視圖-菜單列表視圖中添加子菜單-菜單項(xiàng)視圖
                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
    });

控制臺(tái)打印值如下：

this.el

頁(yè)面效果如圖：

頁(yè)面效果圖

我們通常在render()函數(shù)底部返回this以開(kāi)啟鏈?zhǔn)秸{(diào)用，該視圖可以在其他父視圖里被重用。

<h2>Events對(duì)象</h2>

Backbone提供events對(duì)象支持我們通過(guò)設(shè)置在el下的自定義CSS選擇器、事件類型和事件監(jiān)聽(tīng)器，為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
    });

若沒(méi)有設(shè)置CSS選擇器，則默認(rèn)為el所引用DOM元素綁定事件。

<h2>移除視圖-remove()</h2>

調(diào)用View.remove()，從DOM中移除一個(gè)視圖。同時(shí)將調(diào)用stopListening來(lái)移除通過(guò) listenTo綁定在視圖上的所有事件。


    app.menulistview.remove();

以上是對(duì)Backbone視圖的回顧與總結(jié)，下一篇將介紹<a >Backbone事件</a>。

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Backbone入門之視圖(Backbone.View)

Backbone入門之視圖(Backbone.View)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Backbone入門之視圖(Backbone.View)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av