傳統上用jQuery操作DOM，就類似C語言中的goto語句，隨著項目復雜度增大，會越來越難以維護。
關于MVC（以及后續的MVP，MVVM），網上資源很多，就不展開。我們直接用代碼來操練。
index.html<!doctype html><html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Backbone</title></head><body> <div class="wrapper"></div> <script src="js/lib/jquery.min.js"></script> <script src="js/lib/underscore-min.js"></script> <script src="js/lib/backbone-min.js"></script> <script src="build/x.js"></script></body></html>
其中，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("<ul><li>Hello techfellow!</li></ul>"); }});var listView = new ListView({el: $('.wrapper')});執行：
$duo 1.js
知識點說明
疑惑
如果寫成 new ListView({el: '.wrapper'})也是可以的。
但考慮到el本身的含義，還是加上$更清晰些。
setElement
如果想修改el內容，包括值和綁定事件，可以使用setElement。下面這個例子中，setElement不僅僅把el的引用從button1改為button2，連click事件也同步修改過去了。
// We create two DOM elements representing buttons// which could easily be containers or something elsevar button1 = $('<button></button>');var button2 = $('<button></button>');// 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("<button id='add'>點擊添加</button><ul></ul>"); }, // event handler addItem: function() { this.counter++; this.$('ul').append("<li>Hello techfellow, " + this.counter + " time(s)"); }});var listView = new ListView();執行：
$duo 2.js
知識點
模板
在index.html中加入：
<script type="text/template" id="tplItem"> <li>Hello techfellow, <%= counter %> time(s)</li></script><!--要放在2.js前面，否則在執行時，可能遇到找不到tplItem的情況--><script src="build/2.js"></script>
在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}));...新聞熱點
疑難解答
