《实例讲解JavaScript的Backbone.js框架中的View视图_.docx》由会员分享，可在线阅读，更多相关《实例讲解JavaScript的Backbone.js框架中的View视图_.docx（12页珍藏版）》请在三一文库上搜索。
1、实例讲解JavaScript的Backbone.js框架中的View视图_ 这篇文章主要介绍了实例讲解JavaScript的Backbone.js框架中的View视图,在扫瞄器端js框架backbone中我们用view来绑定和处理DOM大事,需要的伴侣可以参考下 Backbone 中的 View 用来反映你 app 中 Model 的模样。它们会监听大事并作出相应的反应。 接下来的教程我不会告诉你如何把 Model 和 Collection 绑定到 View 上，而是主要商量 View 是如何用法 javascript 模板库的，尤其是 Underscore.jss _.template。 这
2、里我们用法 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() 方法都会被自动触发。
3、 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_
4、view = new SearchView( el: $(#search_container) ); /script 此时，View 的 el 属性指的是 id 为 search_container 的 div 元素。我们此时变绑定了这个 div 元素，那么任何我们盼望触发的大事都必需在这个 div 元素中。 加载模板 Backbone 是强依靠于 Underscore.js 的，所以我们可以用法 Underscore.js 中的小型模板。 现在，让我们添加一个 render() 方法，并且在 initialize() 中调用它，这样当 View 初始化时便会自动触发 render() 方法。
5、 这个 render() 方法将会通过 jQuery 把模板加载到 View 的 el 属性中去。 script type=text/template id=search_template labelSearch/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( init
6、ialize: 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 属性添加监听大事，记住监听大事只能添加到
7、 el 属性的子元素上。现在，我们来给子元素 button 添加一个监听大事。 script type=text/template id=search_template labelSearch/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: fu
8、nction() this.render(); , render: function() var template = _.template( $(#search_template).html(), ); this.$el.html( template ); , events: click inputtype=button: doSearch , doSearch: function( event ) / 当 button 被点击时触发 alert alert( Search for + $(#search_input).val() ); ); var search_view = new Se
9、archView( 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/
10、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
11、into the Backbone el this.$el.html( template ); , events: click inputtype=button: doSearch , doSearch: function( event ) alert( Search for + $(#search_input).val() ); ); var search_view = new SearchView( el: $(#search_container) ); /script 处理DOM大事 视图很重要的一个特性是关心我们自动绑定界面大事。回想一下我们以前是如何为界面标签绑定大事的？可能就像这样
12、： 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 del
13、eteData() / todo $(#create).on(click, createData); $(#read).on(click, readData); $(#update).on(click, updateData); $(#delete).on(click, deleteData); /script 这是一个典型的通过jQuery绑定DOM大事的例子，假如你正在开发或曾经开发过一些简单的应用，你可能尝试过通过某种方式将这些代码更好的组织起来，以便使它们看起来结构更加清楚，更易维护。 Backbone的视图对象为我们供应了大事的自动绑定机制，用于更好地维护DOM和大事间的关系，来看看
14、下面的例子： 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,
15、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进行了关联。 在定
16、义视图类时，我们声明白一个events属性，它表示视图中的用户大事列表，描述方式如下： 大事名称 选择器 : 大事处理函数 大事名称可以是DOM对象支持的任何大事，选择器可以是jQuery或Zepto支持的任意选择器字符串（包括标签选择器、类选择器、id选择器等），而大事处理函数应当是已经定义在视图类本身的方法名称。 视图对象会自动解析events列表中的描述，即用法jQuery或Zepto猎取选择器描述的DOM对象，并将大事处理函数绑定到大事名称中。这些操作都会在视图类被实例化时自动完成，我们可以更关怀视图类本身的结构，而不是刻意地去考虑如何绑定大事。 你可能在担忧另外一个问题：假如视图的D
17、OM结构是动态生成的，Backbone是否供应了相应的方法用于动态绑定和解除大事？ 其实你并不需要关怀这个问题，由于events中的大事是通过delegate()方法绑定到视图对象的el元素上，而并非是选择器所描述的元素。因此视图内的结构无论如何改变，events中的大事都是有效的。 （假如你对jQuery比较熟识，可能了解它所供应的delegate()方法。该方法事实上将大事绑定在父层元素，然后在大事冒泡过程中，通过检查目标子元素来触发大事。） 视图对象通过delegate()方法绑定大事，意味着我们不需要关怀视图结构改变对大事产生的影响，同时也说明events中选择器所对应的元素必需处于视
18、图的el元素之内，否则绑定的大事是无法生效的。 尽管如此，有些状况下可能我们仍旧需要手动绑定和解除大事，视图对象供应了delegateEvents()和undelegateEvents()方法用于动态绑定和解除events大事列表，你可以通过查看API文档来了解它们。 渲染视图和数据 视图主要用于界面大事的绑定和数据渲染，然而视图对象仅仅供应了一个和渲染相关的方法render()，并且它是一个没有任何规律、也没有任何地方引用到的空方法，我们需要重载它来实现自己的渲染规律。 视图中可能包含很多界面规律，这里建议全部的视图子类都重载render()方法，并将它作为最终渲染的入口方法。在团队开发中，严格根据规范编码可以关心别人更好地理解和维护你的代码。 .