backbone库学习-View
Backbone中的视图提供了一组处理DOM事件、和渲染模型(或集合)数据方法(在使用视图之前，你必须先导入jQuery或Zepto)
视图类提供的方法非常简单，我们一般在backbone.View的基础上进行扩展。但即使是特别复杂的视图类，它也应该仅仅是做界面事件、和渲染逻辑相关的操作，数据管理应该交由Model和Collection来完成，而业务逻辑应该由其它的类完成。
上述文字来自http://blog.csdn.net/eagle_110119/article/details/8842026
backbone框架图：http://www.cnblogs.com/nuysoft/archive/2012/03/19/2404274.html
1.1 定义和创建视图
先看例子1.1-1：
<div title="列表" style="color:red" id="list" class="listview"></div> <script type="text/javascript"> var ListView = Backbone.View.extend({ el : '#list' }); var listview = new ListView(); </script>
extend部分就不看，跟collection和model一样。
var ListView = Backbone.View.extend({ el : '#list' });
将el绑定到ListView的原型上，通过ListView实例化的对象可以直接使用。
下一段代码：
var listview = new ListView();
看一下View的构造器：
var View = Backbone.View = function(options) { this.cid = _.uniqueId('view');//生成关于视图的cid options || (options = {}); _.extend(this, _.pick(options, viewOptions));//将自定义属性值绑定到实例上 this._ensureElement();//调用_ensureElement方法 this.initialize.apply(this, arguments);//调用init方法 this.delegateEvents();//调用delegateEvents方法 }
先看一下underscore的pick方法
_.pick = function(obj) { var copy = {}; var keys = concat.apply(ArrayProto, slice.call(arguments, 1));//转成数组 each(keys, function(key) { if (key in obj) copy[key] = obj[key];//为copy绑定自定义的属性值，前提是属性名是viewOptions中的 }); return copy; }
将自定义的信息绑定到this实例。
这里例子略显简单，导致源码很多部分不能覆盖执行，我们给例子添加点东西，再进入_ensureElement方法，看例子1.1-2
<script type="text/javascript"> var ListView = Backbone.View.extend({ tagName : 'div', className : 'listview', id : 'list', attributes : { title : '列表', style : 'color:red' }, render : function() { this.el.innerHTML = 'Hello World!'; document.body.appendChild(this.el); } }); var listview = new ListView(); listview.render(); </script>
其中
{ tagName : 'div', className : 'listview', id : 'list', attributes : { title : '列表', style : 'color:red' }
将会被加到View的实例中。看一下_ensureElement方法
_ensureElement: function() { if (!this.el) {//没有关联页面的标签，一般是创建在页面显示 var attrs = _.extend({}, _.result(this, 'attributes'));//将attributes的信息绑定到attrs上 if (this.id) attrs.id = _.result(this, 'id');//将id传给attrs。 if (this.className) attrs['class'] = _.result(this, 'className');//将className传给attrs //至此attrs获取基本的创建标签的属性 var $el = Backbone.$('<' + _.result(this, 'tagName') + '>').attr(attrs);//调用第三方选择器生成标签，并注入我们自定义的属性信息,但这里还没有将该对象插入HTML页面 this.setElement($el, false); } else {//声明的时候我们定义了el this.setElement(_.result(this, 'el'), false);//调用进入setElement方法 } }
backbone在View这块，依赖一些第三方插件，比如jQuery，Zepto等。所以使用的时候，先将它们加载进来。进入setElement方法。
setElement: function(element, delegate) { if (this.$el) this.undelegateEvents();//初始化时，不执行 this.$el = element instanceof Backbone.$ ? element : Backbone.$(element); //这里给定义,调用第三方的选择器生成dom对象(并非原生dom对象，这里我们引用的是jQuery， // 就姑且认为是jQuery对象),将我们之前生成jQuery对象传给实例的$el属性 this.el = this.$el[0];//获得原生对象 if (delegate !== false) this.delegateEvents(); return this; }
这个例子中，我们没有绑定任何事件。接着我们执行构造器中的最后一个方法delegateEvents
if (!(events || (events = _.result(this, 'events')))) return this;//没有代理事件，返回
因为没有绑定事件，这里就直接返回了。
例子中使用listview.render()，看一下render()
render: function() { //这个方法默认返回实例，使用时，可以将其重载 return this; }
声明View类时，我们已经自定义了render，这将会重载系统中原有的render，那我们来看一下自定义的render
render : function() { this.el.innerHTML = 'Hello World!'; document.body.appendChild(this.el); }
this.el是生成jQuery对象转成的原生对象。在其中添加"Hello World"，最后再将它插入页面，最后显示在页面上
这里我们总结下各个属性的作用，很简单
tagName标识新标签的名称(如果没有设置，则默认是div)
className对应标签的class样式
id对应标签的id属性
1.2 处理DOM事件
可以想一下，以往我们是怎么用jQuery绑定事件的
<p> <input type="button" value="Create" id="create" /> <input type="button" value="Read" id="read" /> <input type="button" value="Update" id="update" /> <input type="button" value="Delete" id="delete" /> </p> <script type="text/javascript"> function createData() { // todo } function readData() { // todo } function updateData() { // todo } function deleteData() { // todo } $('#create').on('click', createData); $('#read').on('click', readData); $('#update').on('click', updateData); $('#delete').on('click', deleteData); </script>
那我们看一下backbone的view是如何处理dom事件的，先上个例子1.2-1
<p id="view"> <input type="button" value="Create" id="create" /> <input type="button" value="Read" id="read" /> <input type="button" value="Update" id="update" /> <input type="button" value="Delete" id="delete" /> </p> <script type="text/javascript"> var MyView = Backbone.View.extend({ el : '#view', events : { 'click #create' : 'createData', 'click #read' : 'readData', 'click #update' : 'updateData', 'click #delete' : 'deleteData' }, createData : function() { console.log('create'); }, readData : function() { console.log('read'); }, updateData : function() { console.log('update'); }, deleteData : function() { console.log('delete'); } }); var view = new MyView(); </script>
看一下View类的声明，将createDate，readData，updateData，deleteData加到了MyView的原型上。这里我们主要看一下构造器上的delegateEvents方法
delegateEvents: function(events) { if (!(events || (events = _.result(this, 'events')))) return this;//没有代理事件，返回 this.undelegateEvents();//进入undelegateEvents方法,去除代理绑定 for (var key in events) { var method = events[key];//获取自定义的方法名 if (!_.isFunction(method)) method = this[events[key]]; if (!method) continue; var match = key.match(delegateEventSplitter);//将类似click #create分离获取 var eventName = match[1], selector = match[2];//获取触发事件动作名，获取选择器 method = _.bind(method, this);//绑定事件，将事件绑定到View的实例上 eventName += '.delegateEvents' + this.cid; if (selector === '') {//监听事件 this.$el.on(eventName, method);//jQuery的原生on事件,低版本的jQuery注意 } else { this.$el.on(eventName, selector, method); } } return this; }
看一下undelegateEvents方法
undelegateEvents: function() { this.$el.off('.delegateEvents' + this.cid);//删除绑定事件 return this; }
创建事件之前，先将以前可能存在的事件都删除掉。这里最后绑定事件的方法其实是jQuery的on方法，所以大家在引用第三方插件的时候，注意插件的版本。
另外就是这里的绑定事件都是绑定的都是p标签，所以使用事件委任，这写button在remove掉之后，再添加进来，依旧有事件。满足动态删减dom的情况。
内容不多，时间刚好，以上是我的一点读码体会，如有错误，请指出，大家共通学习。
