今天來看下backbone的路由控制的功能。其實個人感覺backbone，模塊就那麼幾個，熟悉它的框架結構，以及組成，就差不多。 廢話不多說，我們來看看還剩下的功能。 關於路由和歷史管理 通過 Backbone.Router.extend 來創建路由模型，鏈接到不同的指定的動作和事件.當應用已經全部 ...
今天來看下backbone的路由控制的功能。其實個人感覺backbone，模塊就那麼幾個，熟悉它的框架結構，以及組成，就差不多。
廢話不多說，我們來看看還剩下的功能。
關於路由和歷史管理
通過 Backbone.Router.extend 來創建路由模型，鏈接到不同的指定的動作和事件.當應用已經全部鏈接到路由時，需利用Backbone.history.start() 或者Backbone.history.start({pushState: true}) 來確保驅動初始化 URL 的路由。
我們來具體的看個列子：
//路由與歷史管理 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 定義路由動作鍵值對。 註意:要避免在路由定義時使用前導斜杠!!!!!
關於事件委托
什麼叫事件委托呢？即事件代理，利用冒泡原理，將某一元素的事件，委托給其它元素處理的事件。
好處：提高性能 | 新添加的元素，依然保留了該事件。
//事件委托 $(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; });
看下html相對應的代碼：
<input type="button" value="name"> <ul> <li>11111111</li> <li>22222222</li> <li>33333333</li> <li>44444444</li> </ul>
當點擊Input時候，發生click事件，觸發aaa，當滑鼠移入li上時，觸發bbb。
關於前端模板
好處：更好的實現mvc機制，讓js的操作與試圖進行分離。通常是template:_.template($('#template').html())這種寫法。
//前端模板 ：更好的讓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' ); });
html代碼如下：
<div id="template"></div>
實例演練分析
效果地址：http://www.css88.com/doc/backbone/examples/todos/index.html
下載地址：https://github.com/foreverjiangting/backbone/tree/master/examples/todos
主頁html代碼如下：
<!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 == 1 ? 'item' : 'items' %></a> <% } %> <div class="todo-count"><b><%= remaining %></b> <%= remaining == 1 ? 'item' : 'items' %> left</div> </script> </body> </html>
關於backbone的js部分控制，這裡不再貼碼，可自行查看github 裡面的官網例子，很詳細的。這篇先到這裡結束，之後，準備自己做點東西再貼出來。
作者：婷風
出處：http://www.cnblogs.com/jtjds/p/5867193.html
如果您覺得閱讀本文對您有幫助，請點一下“推薦”按鈕，您的“推薦”將是我最大的寫作動力！歡迎各位轉載，但是未經作者本人同意
轉載文章之後必須在 文章頁面明顯位置給出作者和原文連接否則保留追究法律責任的權利。
