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