Backbone.js框架中简单的View视图编写学习笔记
传统上用jQuery操作DOM，就类似C语言中的goto语句，随着项目复杂度增大，会越来越难以维护。
关于MVC（以及后续的MVP，MVVM），网上资源很多，就不展开。我们直接用代码来操练。
index.html <!doctypehtml> <htmllang="en"> <head> <metacharset="utf-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"> <title>Backbone</title> </head> <body> <divclass="wrapper"></div> <scriptsrc="js/lib/jquery.min.js"></script> <scriptsrc="js/lib/underscore-min.js"></script> <scriptsrc="js/lib/backbone-min.js"></script> <scriptsrc="build/x.js"></script> </body> </html>
其中，x.js是用duo生成后的js。文件中引用的几个js，都可以从百度静态资源库中下载到
1.js
varListView=Backbone.View.extend({
//el:$('.wrapper'),
//初始化函数，new时，backbone会自动调用
initialize:function(){
this.render();
},
//真正把修改操作同步到浏览器中
render:function(){
this.$el.append("<ul><li>Hellotechfellow!</li></ul>");
}
});
varlistView=newListView({el:$('.wrapper')});
执行：
$duo1.js
知识点说明
- el：表示该View所代表的DOM元素，在render函数中，会同步到DOM操作中去。
- initialze：调用new时，会触发的函数调用，类似构造函数。
- render：触发DOM操作，浏览器会渲染
- 最后一句，说明在new时，可以传递参数
疑惑
如果写成newListView({el:'.wrapper'})也是可以的。
但考虑到el本身的含义，还是加上$更清晰些。
- $el和$()
- $(this.el)等价于this.$el
- $(this.el).find('.wrapper')等价于this.$('.wrapper')
setElement
如果想修改el内容，包括值和绑定事件，可以使用setElement。下面这个例子中，setElement不仅仅把el的引用从button1改为button2，连click事件也同步修改过去了。
//WecreatetwoDOMelementsrepresentingbuttons
//whichcouldeasilybecontainersorsomethingelse
varbutton1=$('<button></button>');
varbutton2=$('<button></button>');
//Defineanewview
varView=Backbone.View.extend({
events:{
click:function(e){
console.log(view.el===e.target);
}
}
});
//Createanewinstanceoftheview,applyingit
//tobutton1
varview=newView({el:button1});
//Applytheviewtobutton2usingsetElement
view.setElement(button2);
button1.trigger('click');
button2.trigger('click');//returnstrue
事件处理和模板解析都是前端渲染必需的工作，backbone一般把这些内容放到View里面统一处理。
2.js
varListView=Backbone.View.extend({
el:$('.wrapper'),
events:{
'clickbutton#add':'addItem'
},
//初始化函数，new时，backbone会自动调用
initialize:function(){
//用于计数
this.counter=0;
this.render();
},
//真正把修改操作同步到浏览器中
render:function(){
this.$el.append("<buttonid='add'>点击添加</button><ul></ul>");
},
//eventhandler
addItem:function(){
this.counter++;
this.$('ul').append("<li>Hellotechfellow,"+this.counter+"time(s)");
}
});
varlistView=newListView();
执行：
$duo2.js
知识点
- this.counter：内部使用的数据，可以initialize中初始化
- events：声明格式，'eventselector':'func'，这比之前$('.wrapperbutton#add').on('click',function(){...});的方式要清晰许多了。
模板
在index.html中加入：
<scripttype="text/template"id="tplItem"> <li>Hellotechfellow,<%=counter%>time(s)</li> </script> <!--要放在2.js前面，否则在执行时，可能遇到找不到tplItem的情况--> <scriptsrc="build/2.js"></script>
在View的声明中修改：
events:{
'clickbutton#add':'addItem'
},
template:_.template($('#tplItem').html()),
修改addItem：
addItem:function(){
this.counter++;
this.$('ul').append(this.template({counter:this.counter}));
}
同理，这里的模板可以替换为任何第三方模板引擎。
比如：artTemplate
vartemplate=require('./lib/template.js');
...
this.$('ul').append(template('tplItem',{counter:this.counter}));
...