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()方法，并将它作为最终渲染的入口方法。在团队开发中，严格按照规范编码可以帮助别人更好地理解和维护你的代码。
【实例讲解JavaScript的Backbone.js框架中的View视图】相关文章：
★ JavaScript中用于四舍五入的Math.round()方法讲解
★ 简介JavaScript中的setTime()方法的使用