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