2013年9月24日星期二

backbone Library Learn

 

 

Backbone of view provides a set of DOM event handling , and rendering the model ( or collection ) data method ( using the view , you must first import jQuery or Zepto)

 

view class provides methods is very simple, we generally backbone.View basis for expansion. But even particularly complex view class , it should only be done interface events , and render logically related operations, data management should be handed over to Model and Collection to complete, and the business logic should be completed by the other classes .

 

the text from http://blog.csdn.net/eagle_110119/article/details/8842026

 

backbone frame chart : http://www.cnblogs.com/nuysoft/archive / 2012/03/19/2404274.html

 

 

1.1 define and create a view

 

look at examples 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 some do not look the same with the collection and model .

 
  
var ListView = Backbone.View.extend({   
el :
'#list'
});
 
 

will bind to the ListView el prototype , through ListView instantiated object can be used directly .

 

next section of code :

 
  
var listview = new ListView();  
 
 

look at the View constructor :

 
  
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方法
}
 
 

look at underscore the pick method

 
  
_.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;
}
 
 

customized information will bind to this instance.

 

example here a bit simple , resulting in many parts of code can not cover the implementation , we give examples to add something, and then enter _ensureElement method , see example 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>
 
 

which

 
  
{   
tagName :
'div',
className :
'listview',
id :
'list',
attributes : {
title :
'列表',
style :
'color:red'
}
 
 View

will be added to the instance. Look _ensureElement method

 
  
_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 in View this , rely on some third-party plug-ins, such as jQuery, Zepto and so on. So use it, first load them in. Enter setElement method .

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

this example, we did not bind any event . Then we perform the last constructor method delegateEvents

 
  
if (!(events || (events = _.result(this, 'events')))) return this;//没有代理事件,返回
 
 

because there is no binding events , here is a direct return .

 

example uses listview.render (), look at the render ()

 
  
render: function() { //这个方法默认返回实例,使用时,可以将其重载 
return this;
}
 
 

View class declaration , we have customized render, which will override the system any original render, then we look at a custom render

 
  
render : function() { 
this.el.innerHTML = 'Hello World!';
document.body.appendChild(
this.el);
}
 
 

this.el is to generate a jQuery object into native objects. In which you add the "Hello World", and then insert it into the final page , and finally displayed on the page

 

 

Here we summarize the role of each attribute , a very simple

 

tagName new label identifies the name ( if not set , the default is div)

 

className corresponding label class style

 

id id attribute corresponding label

 

 

1.2 handle DOM events < / span>

 

can think about the past, how we use jQuery to bind events

 

 
  
<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>
 
 

then we look at the backbone of view is how to deal dom events , first on the example 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>
 
 

look at the View class declaration will createDate, readData, updateData, deleteData added to MyView 's prototype . Here we look at the delegateEvents constructor method

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

look undelegateEvents method

 
  
undelegateEvents: function() { 
this.$el.off('.delegateEvents' + this.cid);//删除绑定事件
return this;
}
 
 

create an event before the first event may have previously existed are deleted. Where the last method is actually binding events on the jQuery method, so everyone in the referenced third-party plug-ins , pay attention to plug-in version.

 

 

other is here, are binding events are bound p label, so use the event to appoint , remove this write- off after the button , and then added, and still have events. Meet the dynamic deletion dom situation.

 

content is not much, just in time , the above is my little reading experience, any errors, please point out that we common learning .

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

没有评论:

发表评论