Backbone 中的View 用來反映你app 中Model 的模樣。它們會監聽事件並作出相應的反應。
接下來的教程我不會告訴你如何把Model 和Collection 綁定到View 上，而是主要討論View 是如何使用javascript 模板庫的，尤其是Underscore.js's _.template。
這裡我們使用jQuery 來操作DOM 元素，當然你也可以使用其他的庫，例如MooTools 或者Sizzle,但是Backbone 的官方文檔推薦我們使用jQuery。
接下來，我們以搜索框為例來新建一個View：
SearchView = Backbone.View.extend({ initialize: function(){ alert("Welcome to Backbone!"); }});var search_view = new SearchView();無論是Model，View 還是Collection，當被實例化時，initialize() 方法都會被自動觸發。
el 屬性
el 屬性指的是已經在瀏覽器中創建好的DOM 對象，每個View 都有一個el 屬性，如果它未被定義，Backbone 將會自己創建一個空的div 元素作為el 屬性。
下面讓我們來為View 創建一個el 屬性，並設為#search_containe。
<div id="search_container"></div><script type="text/javascript"> SearchView = Backbone.View.extend({ initialize: function(){ alert("Welcome to Backbone!"); } }); var search_view = new SearchView({ el: $("#search_container") });</script>此時，View 的el 屬性指的是id 為search_container 的div 元素。我們此時變綁定了這個div 元素，那麼任何我們希望觸發的事件都必須在這個div 元素中。
加載模板
Backbone 是強依賴於Underscore.js 的，所以我們可以使用Underscore.js 中的小型模板。
現在，讓我們添加一個render() 方法，並且在initialize() 中調用它，這樣當View 初始化時便會自動觸發render() 方法。
這個render() 方法將會通過jQuery 把模板加載到View 的el 屬性中去。
<script type="text/template" id="search_template"> <label>Search</label> <input type="text" id="search_input" /> <input type="button" id="search_button" value="Search" /></script><div id="search_container"></div><script type="text/javascript"> SearchView = Backbone.View.extend({ initialize: function(){ this.render(); }, render: function(){ // 通過Underscore 編譯生成模板var template = _.template( $("#search_template").html(), {} ); //講生成的模板加載到el 屬性中this.$el.html( template ); } }); var search_view = new SearchView({ el: $("#search_container") });</script>添加監聽事件
我們使用View 的events 屬性添加監聽事件，記住監聽事件只能添加到el 屬性的子元素上。現在，我們來給子元素button 添加一個監聽事件。
<script type="text/template" id="search_template"> <label>Search</label> <input type="text" id="search_input" /> <input type="button" id="search_button" value="Search" /></script><div id="search_container"></div><script type="text/javascript"> SearchView = Backbone.View.extend({ initialize: function(){ this.render(); }, render: function(){ var template = _.template( $("#search_template").html(), {} ); this.$el.html( template ); }, events: { "click input[type=button]": "doSearch" }, doSearch: function( event ){ // 當button 被點擊時觸發alert alert( "Search for " + $("#search_input").val() ); } }); var search_view = new SearchView({ el: $("#search_container") });</script>向模板中傳遞參數
模板可以通過<%= %> 的形式使用從View 中傳來的參數。
<script type="text/template" id="search_template"> <!-- 通過<%= %> 形式使用傳來的參數--> <label><%= search_label %></label> <input type="text" id="search_input" /> <input type="button" id="search_button" value="Search" /></script><div id="search_container"></div><script type="text/javascript"> SearchView = Backbone.View.extend({ initialize: function(){ this.render(); }, render: function(){ //定義需要傳遞的參數var variables = { search_label: "My Search" }; // 通過Underscore 生成模板，同時傳遞參數var template = _.template( $("#search_template").html(), variables ); // Load the compiled HTML into the Backbone "el" this.$el.html( template ); }, events: { "click input[type=button]": "doSearch" }, doSearch: function( event ){ alert( "Search for " + $("#search_input").val() ); } }); var search_view = new SearchView({ el: $("#search_container") });</script>處理DOM事件
視圖很重要的一個特性是幫助我們自動綁定界面事件。回想一下我們以前是如何為界面標籤綁定事件的？可能就像這樣：
<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>這是一個典型的通過jQuery綁定DOM事件的例子，如果你正在開發或曾經開發過一些複雜的應用，你可能嘗試過通過某種方式將這些代碼更好的組織起來，以便使它們看起來結構更加清晰，更易維護。
Backbone的視圖對象為我們提供了事件的自動綁定機制，用於更好地維護DOM和事件間的關係，來看看下面的例子：
<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() { // todo }, readData : function() { // todo }, updateData : function() { // todo }, deleteData : function() { // todo } }); var view = new MyView(); </script>在這個例子中，我們將4個按鈕放在一個id為view的標籤中，並將這個標籤與視圖類MyView進行了關聯。
在定義視圖類時，我們聲明了一個events屬性，它表示視圖中的用戶事件列表，描述方式如下：
事件名稱選擇器: 事件處理函數事件名稱可以是DOM對象支持的任何事件，選擇器可以是jQuery或Zepto支持的任意選擇器字符串（包括標籤選擇器、類選擇器、id選擇器等），而事件處理函數應該是已經定義在視圖類本身的方法名稱。
視圖對象會自動解析events列表中的描述，即使用jQuery或Zepto獲取選擇器描述的DOM對象，並將事件處理函數綁定到事件名稱中。這些操作都會在視圖類被實例化時自動完成，我們可以更關心視圖類本身的結構，而不是刻意地去考慮如何綁定事件。
你可能在擔心另外一個問題：如果視圖的DOM結構是動態生成的，Backbone是否提供了相應的方法用於動態綁定和解除事件？
其實你並不需要關心這個問題，因為events中的事件是通過delegate()方法綁定到視圖對象的el元素上，而並非是選擇器所描述的元素。因此視圖內的結構無論如何變化，events中的事件都是有效的。
（如果你對jQuery比較熟悉，可能了解它所提供的delegate()方法。該方法實際上將事件綁定在父層元素，然後在事件冒泡過程中，通過檢查目標子元素來觸發事件。）
視圖對象通過delegate()方法綁定事件，意味著我們不需要關心視圖結構變化對事件產生的影響，同時也說明events中選擇器所對應的元素必須處於視圖的el元素之內，否則綁定的事件是無法生效的。
儘管如此，有些情況下可能我們仍然需要手動綁定和解除事件，視圖對象提供了delegateEvents()和undelegateEvents()方法用於動態綁定和解除events事件列表，你可以通過查看API文檔來了解它們。
渲染視圖和數據
視圖主要用於界面事件的綁定和數據渲染，然而視圖對象僅僅提供了一個和渲染相關的方法render()，並且它是一個沒有任何邏輯、也沒有任何地方引用到的空方法，我們需要重載它來實現自己的渲染邏輯。
視圖中可能包含許多界面邏輯，這裡建議所有的視圖子類都重載render()方法，並將它作為最終渲染的入口方法。在團隊開發中，嚴格按照規範編碼可以幫助別人更好地理解和維護你的代碼。