认识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();
});