backbone学习总结（二）
编程爱好者联盟 2016-09-17
;今天来看下backbone的路由控制的功能。其实个人感觉backbone，模块就那么几个，熟悉它的框架结构，以及组成，就差不多。
废话不多说，我们来看看还剩下的功能。
<span ;style="color: ;#ff0000;">关于路由和历史管理</span>
通过 Backbone.Router.extend ;来创建路由模型，链接到不同的指定的动作和事件.当应用已经全部链接到路由时，需利用Backbone.history.start() ;或者Backbone.history.start({pushState: ;true}) 来确保驱动初始化 ;URL ;的路由。
我们来具体的看个列子：
; ;<pre> ;//路由与历史管理 ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;
; ;var ; ; ;Workplace ; ;= ; ;Backbone.Router.extend({
; ; ; ; ; ; ; ;routers: ;{
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;"help" ;: ;"help" ;, ; ;//对应的调用方法 ; ;#help
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;"search/:query" ;: ;"search" ;, ; ; ; ; ; ;#search/help
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;"search/:query/p:page" ;: ;"search" ; ;#search/query/p3
; ; ; ; ; ; ; ;} ;,
; ; ; ; ; ; ; ; ;help ;: ;function(){
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;console.log('111');
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;//alert('111');
; ; ; ; ; ; ; ; ; ;},
; ; ; ; ; ; ; ; ;search ;: ;function(query ;, ;page){
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;console.log('222');
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;//alert('333');
; ; ; ; ; ; ; ; ; ;}
; ;});
; ;var ; ;w ;= ;new ; ; ; ;Workplace ;; ; ;
; ;Backbone.history.start(); ;//保证路由在浏览器中有历史管理
开始创建一个自定义的路由类。当匹配了 ;URL ;片段便执行定义的动作，并可以通过routers 定义路由动作键值对。 ;注意:要避免在路由定义时使用前导斜杠!!!!!
<span ;style="color: ;#ff0000;">关于事件委托</span>
;什么叫事件委托呢？即事件代理，利用冒泡原理，将某一元素的事件，委托给其它元素处理的事件。
;好处：提高性能 ;| ;新添加的元素，依然保留了该事件。
; ;<pre> ; ; ; ;//事件委托
;$(function(){ ; ; ; ; ; ; ; ; ; ;
; ; ; ; ; ;var ; ; ;V ; ;= ; ;Backbone.View.extend({
; ; ; ; ; ; ; ; ; ; ; ;el ;: ;$('body'), ; ; ;//el当前的委托人。用BODY作为委托人
; ; ; ; ; ; ; ; ; ; ; ;events ;: ;{ ; ; ; ; ; ; ; ;//事件
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;'click ; ;input' ;: ;'aaa' ;,
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;'mouseover ;li ;' ;: ;'bbb'
; ; ; ; ; ; ; ; ; ; ; ;},
; ; ; ; ; ; ; ; ; ; ; ;aaa ;: ;function(){
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;console.log('aa');
; ; ; ; ; ; ; ; ; ; ; ;},
; ; ; ; ; ; ; ; ; ; ; ;bbb ;: ;function(){
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;console.log('bb')
; ; ; ; ; ; ; ; ; ; ; ;}
; ; ; ; ; ; ;});
; ; ; ; ; ; ;var ; ; ; ;view ; ;= ;new ; ;V;
});</pre> ; ;
看下html相对应的代码：
; ;<pre><input ;type="button" ;value="name">
<ul>
; ; ; ; ;<li>11111111</li>
; ; ; ; ;<li>22222222</li>
; ; ; ; ;<li>33333333</li>
; ; ; ; ;<li>44444444</li>
</ul></pre> ; ;
当点击Input时候，发生click事件，触发aaa，当鼠标移入li上时，触发bbb。
<span ;style="color: ;#ff0000;">关于前端模板</span>
;好处：更好的实现mvc机制，让js的操作与试图进行分离。通常是template:_.template($('#template').html())这种写法。
; ;<pre> ;//前端模板 ;：更好的让js的操作与视图进行分离 ; ; ;
; ; ;$(function(){
; ; ; ; ; ; ; ; ; ;var ; ;M ;= ;Backbone.Model.extend({
; ; ; ; ; ; ; ; ; ; ; ; ; ; ;defaults ;: ;{
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;name ;: ;'婷风'
; ; ; ; ; ; ; ; ; ; ; ; ; ; ;}
; ; ; ; ; ; ; ; ; ;}) ;;
; ; ; ; ;//创建一个试图，listenTo比on多一个参数，改写了this指向
; ; ; ; ; ; ; ; ; ;var ; ;V ;= ;Backbone.View.extend({
; ; ; ; ; ; ; ; ; ; ; ; ; ; ;initialize ;: ;function ;(){
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;this.listenTo(this.model ;, ;' ;change' ;, ;this.show); ;//操作的元素 ;| ;数据发生改变的时候，发生show事件
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;},
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;show ;: ;function ;(model){
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;$('body').append(this.template(this.model.toJSON() ; ;)); ;//调用模板的方法
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;},
; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ;template ;: ;_.template($(' ;#template').html()) ;
; ; ; ; ; ; ; ; ; ; ;});
; ; ; ; ; ; ; ; ; ; ;var ; ; ;m ; ;= ;new ; ;M; ;
; ; ; ; ; ; ; ; ; ; ;var ; ; ;v ; ;= ;new ; ;V({model:m});
; ; ; ; ; ; ; ; ; ; ;m.set('name' ;, ;'jt' ;);
; ; ; ; ;});</pre> ; ;
html代码如下：
; ;<pre><div ; ;id="template"></div></pre> ; ;
<span ;style="color: ;#ff0000;">实例演练分析</span>
;效果地址：http://www.css88.com/doc/backbone/examples/todos/index.html
;下载地址：https://github.com/foreverjiangting/backbone/tree/master/examples/todos
;主页html代码如下：
; ;<pre><!DOCTYPE ;html>
<html ;lang="en">
<head>
; ;<meta ;charset="utf-8">
; ;<title>Backbone.js ;Todos</title>
; ;<link ;rel="stylesheet" ;href="todos.css"/> ; ;<script ;type="text/javascript" ;src="jquery.js"></script> ;<script ;type="text/javascript" ;src="underscore-min.js"></script> ;<script ;type="text/javascript" ;src="backbone.js"></script>
; ;<script ;src="backbone.localStorage.js"></script>
; ;<script ;src="todos.js"></script>
</head>
<body>
; ;<div ;id="todoapp">
; ; ; ;<header>
; ; ; ; ; ;<h1>Todos</h1>
; ; ; ; ; ;<input ;id="new-todo" ;type="text" ;placeholder="What ;needs ;to ;be ;done?">
; ; ; ;</header>
; ; ; ;<section ;id="main">
; ; ; ; ; ;<input ;id="toggle-all" ;type="checkbox">
; ; ; ; ; ;<label ;for="toggle-all">Mark ;all ;as ;complete</label>
; ; ; ; ; ;<ul ;id="todo-list"></ul> ; ; ;//包含每个li元素
; ; ; ;</section>
; ; ; ;<footer>
; ; ; ; ; ;<a ;id="clear-completed">Clear ;completed</a>
; ; ; ; ; ;<div ;id="todo-count"></div>
; ; ; ;</footer>
; ;</div>
; ;<div ;id="instructions">
; ; ; ;Double-click ;to ;edit ;a ;todo.
; ;</div>
; ;<!-- ;单个li的Templates ;-->
; ;<script ;type="text/template" ;id="item-template">
; ; ; ;<div ;class="view">
; ; ; ; ; ;<input ;class="toggle" ;type="checkbox" ;<%= ;done ;? ;'checked="checked"' ;: ;'' ;%> ;/>
; ; ; ; ; ;<label><%- ;title ;%></label>
; ; ; ; ; ;<a ;class="destroy"></a>
; ; ; ;</div>
; ; ; ;<input ;class="edit" ;type="text" ;value="<%- ;title ;%>" ;/> ; ; ;//双击li中的输入框进行编辑
; ;</script>
<!-- ;底部的Templates ;-->
; ;<script ;type="text/template" ;id="stats-template">
; ; ; ;<% ;if ;(done) ;{ ;%>
; ; ; ; ; ;<a ;id="clear-completed">Clear ;<%= ;done ;%> ;completed ;<%= ;done ;== ; ;? ;'item' ;: ;'items' ;%></a>
; ; ; ;<% ;} ;%>
; ; ; ;<div ;class="todo-count"><b><%= ;remaining ;%></b> ;<%= ;remaining ;== ;1 ;? ;'item' ;: ;'items' ;%> ;left</div>
; ;</script>
; ;</body>
</html></pre> ; ;
关于backbone的js部分控制，这里不再贴码，可自行查看github ;里面的官网例子，很详细的。这篇先到这里结束，之后，准备自己做点东西再贴出来。
作者：婷风
<span ;style="color: ;#3366ff;"> 出处：http://www.cnblogs.com/jtjds/p/5867193.html</span>
<span ;style="color: ;#3366ff;"> 如果您觉得阅读本文对您有帮助，请点一下”推荐按钮，您的”推荐将是我最大的写作动力！欢迎各位转载，但是未经作者本人同意 </strong></strong></span>
<span ;style="color: ;#3366ff;">转载文章之后必须在 ;文章页面明显位置给出作者和原文连接否则保留追究法律责任的权利。</strong></strong></strong></strong></strong></strong></strong></strong></span>
