传统上用jquery操作dom，就类似c语言中的goto语句，随着项目复杂度增大，会越来越难以维护。
关于mvc（以及后续的mvp，mvvm），网上资源很多，就不展开。我们直接用代码来操练。
index.html backbone

其中，x.js是用duo生成后的js。文件中引用的几个js，都可以从百度静态资源库中下载到
1.js
var listview = backbone.view.extend({ //el: $('.wrapper'), // 初始化函数，new时，backbone会自动调用 initialize: function() { this.render(); }, // 真正把修改操作同步到浏览器中 render: function() { this.$el.append(hello techfellow!); }});var listview = new listview({el: $('.wrapper')});
执行：
$duo 1.js
知识点说明
el：表示该view所代表的dom元素，在render函数中，会同步到dom操作中去。 initialze：调用new时，会触发的函数调用，类似构造函数。 render：触发dom操作，浏览器会渲染 最后一句，说明在new时，可以传递参数疑惑
如果写成 new listview({el: '.wrapper'})也是可以的。
但考虑到el本身的含义，还是加上$更清晰些。
$el和$() $(this.el) 等价于 this.$el $(this.el).find('.wrapper') 等价于 this.$('.wrapper')setelement
如果想修改el内容，包括值和绑定事件，可以使用setelement。下面这个例子中，setelement不仅仅把el的引用从button1改为button2，连click事件也同步修改过去了。
// we create two dom elements representing buttons// which could easily be containers or something elsevar button1 = $('');var button2 = $('');// define a new viewvar view = backbone.view.extend({ events: { click: function(e) { console.log(view.el === e.target); } } });// create a new instance of the view, applying it// to button1var view = new view({el: button1});// apply the view to button2 using setelementview.setelement(button2);button1.trigger('click');button2.trigger('click'); // returns true
事件处理和模板解析都是前端渲染必需的工作，backbone一般把这些内容放到view里面统一处理。
2.js
var listview = backbone.view.extend({ el: $('.wrapper'), events: { 'click button#add': 'additem' }, // 初始化函数，new时，backbone会自动调用 initialize: function() { // 用于计数 this.counter = 0; this.render(); }, // 真正把修改操作同步到浏览器中 render: function() { this.$el.append(点击添加); }, // event handler additem: function() { this.counter++; this.$('ul').append(hello techfellow, + this.counter + time(s)); }});var listview = new listview();
执行：
$duo 2.js
知识点
this.counter：内部使用的数据，可以initialize中初始化 events：声明格式，'event selector': 'func'，这比之前$('.wrapper button#add').on('click', function(){...}); 的方式要清晰许多了。模板
在index.html中加入：

在view的声明中修改：
events: { 'click button#add': 'additem'},template: _.template($('#tplitem').html()),
修改additem：
additem: function() { this.counter++; this.$('ul').append(this.template({counter: this.counter}));}
同理，这里的模板可以替换为任何第三方模板引擎。
比如：arttemplate
var template = require('./lib/template.js');...this.$('ul').append(template('tplitem', {counter: this.counter}));...