認識Backbone (四)

 　　Backbone.View（視圖）

　　視圖的核心是處理數據業務邏輯、綁定DOM元素事件、渲染模型或者集合數據。

　　添加DOM元素 

　　render view.render() render 默認實現是沒有操做的。 重載本函數能夠實現從模型數據渲染視圖模板，並可用新的 HTML 更新 this.el。 推薦的作法是在 render 函數的末尾 return this 以開啓鏈式調用。

var testview = Backbone.View.extend({
    id: 'show',
    render: function (content) {
        //this.el.innerHTML = content;
        //document.body.appendChild(this.el);
        this.$el.html(content).appendTo($('body'));
    }
});
var test = new testview();
test.render("hello world!");

　　訪問模型對象 

var Book = Backbone.Model.extend({
    defaults:{
        title: 'backbone',
        author: 'Jeremy Ashkenas'
    }
});
var book = new Book({title:'ios',author:'apple'});

var BookView = Backbone.View.extend({
    id: 'show',
    render: function(){
         this.$el.html(JSON.stringify(this.model)).appendTo($('body'));
    }
});
var bookview = new BookView({model: book});
bookview.render();

 　　訪問集合對象

var booklist = [
    {title:'ios',author:'apple'},
    {title:'android',author:'google'},
    {title:'Windows Phone',author:'microsoft'}
];
var books = new Backbone.Collection(booklist);

var BookView = Backbone.View.extend({
    id: 'show',
    render: function(){
        var html = '';
        _.each(this.collection.models,function(book){
            html += JSON.stringify(book)+'
';
        });
        this.$el.html(html).appendTo($('body'));
    }
});
var bookview = new BookView({collection: books});
bookview.render();

　　使用模板　

　　template view.template([data])  雖然模板化的視圖 不是Backbone直接提供的一個功能， 它每每是一個在視圖定義template函數很好的約定。 

<script type="text/template" id="templateID">
    <%= code > 60 ? '及格' : '不及格' %>
</script>

var ksView = Backbone.View.extend({
    id: 'show',
    initialize: function(){
        this.template = _.template( $('#templateID').html() );
        this.$el.appendTo($('body'));
    },
    render: function(num){
        this.$el.html( this.template({code: num}) );
    }
});
var ksview = new ksView();
ksview.render(50);

<script type="text/template" id="template">
    <ol>
        <li>系統：<%=system %></li>
        <li>公司：<%=company %></li>
    </ol>
</script>

var System = Backbone.Model.extend({
    defaults: {
        'system': '',
        'company': ''
    }
});
var system = new System({
    'system': 'ios',
    'company': 'apple'
});

var systemView = Backbone.View.extend({
    id: 'show',
    initialize: function(){
        this.template = _.template( $('#template').html() );
        this.$el.appendTo($('body'));
    },
    render: function(){
        this.$el.html( this.template(this.model.toJSON()) );
    }
});
var view = new systemView({model: system});
view.render();

//自定義模板格式
_.templateSettings = {
    interpolate: /\{\{(.+?)\}\}/g
};
var template = _.template("Hello {{ name }}!");
console.log( template({name: "Backbone"}) );

_.templateSettings = {
    interpolate: /\$(.+?)\$/g  
};
var template = _.template("Hello $name$!");
console.log( template({name: "Backbone"}) );

　　綁定事件

var View = Backbone.View.extend({
    el: '#view',
    initialize: function(){
        this.render();
    },
    render: function(){
        this.$el.html('這是一個綁定視圖事件的容器').appendTo($('body'));
    },
    events: {
        'click': 'alertHello',
    },
    alertHello: function () {
        alert('hello world!');
    }
});
var view = new View(); 

 

<script type="text/template" id="templateFile">
    <input type="button" id="btn" value="<%= name %>" />
    <div id="box" style="display:none;"><%= message %></div>
</script>

var View = Backbone.View.extend({
    id: 'view',
    initialize: function(){
        this.template = _.template( $('#templateFile').html() );
        this.$el.appendTo($('body'));
        this.render();
    },
    render: function(){
        this.$el.html( this.template({
            name: '點擊我試試',
            message: '哇，你把我挖出來了'
        }) );
    },
    events: {
        'click #btn': 'toggle'
    },
    toggle: function(){
        $('#box').slideToggle();
    }
});
var view = new View(); 

 delegateEvents delegateEvents([events]) 採用 jQuery 的on函數來爲視圖內的 DOM 事件提供回調函數聲明。 若是未傳入 events對象，使用 this.events 做爲事件源。 事件對象的書寫格式爲 {"event selector": "callback"}。 省略 selector 則事件被綁定到視圖的根元素（this.el）。 默認狀況下，delegateEvents 會在視圖的構造函數內被調用，所以若是有 events 對象，全部的 DOM 事件已經被鏈接， 而且咱們永遠不須要去手動調用本函數。

undelegateEvents undelegateEvents() 刪除視圖全部委託事件。若是要從臨時的DOM中禁用或刪除視圖時，比較有用。 

<script type="text/template" id="templateFile">
    <input type="button" id="btn1" value="點我觸發事件" />
    <input type="button" id="btn2" value="點我刪除綁定事件" />
    <input type="button" id="btn3" value="點我從新綁定事件" />
    <div id="box" style="display: block;">哇，你好棒啊!</div>
</script>

var View = Backbone.View.extend({
    id: 'view',
    initialize: function(){
        this.template = _.template( $('#templateFile').html() );
        this.$el.appendTo($('body'));
        this.render();
    },
    render: function(){
        this.$el.html( this.template() );
    },
    events: {
        'click #btn1': 'toggle',
        'click #btn2': 'unbindEvent'
    },
    toggle: function(){
        $('#box').slideToggle();
    },
    bindEvent: function(){
        this.delegateEvents( this.events );
    },
    unbindEvent: function(){
        this.undelegateEvents();
    }
});
var view = new View(); 
$('#btn3').on('click', function() {
    view.bindEvent();
});