- 屬性 routes: 用來設定 routes hash 對應的動作 ( actions, functions )。
- 方法 initialize: 初始化呼叫, 自行定義。建立 Router 物件時若傳入 Object 物件, 讓物件會視為 routes 的設定。
- 方法 route: 動態設定 routes hash 對應的動作。
- 方法 navigate: 呼叫此方法以變更 URL。第一個參數為字串, 第二個參數為 Object 物件。Object 物件屬性 trigger 設定為 true 時, 表示要呼叫 route function。Object 物件屬性 replace設定為 true 時, 表示不留在 history 裡。
呼叫 Backbone.history.start() 時傳入的 Object 物件屬性可以有三個:
- 屬性 pushState: 設定為 true 時表示使用 HTML5 的 pushState 功能, 將不會在 URL 使用 # , 這通常需要做後端 URL mapping 設定。
- 屬性 root: 如果路徑不是 / 可以使用 root 設定。
- 屬性 silent: 如果不願在初始化時呼叫 route function, 把 silent 設定為 trrue。
在 IE 建議不要使用以上三個屬性設定... 囧。
<<< t02_Router.html ----------------------------------->>>
<html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> </head> <body> <div id="buttons" mydata="shinder"> <button id="b1"> Button 1 </button> <button id="b2"> Button 2 </button> <button id="b3"> Button 3 </button> </div> <script type="text/javascript" src="js/jquery-1.7.1.js"></script> <script type="text/javascript" src="js/coffee-script.js"></script> <script type="text/javascript" src="js/json2.js"></script> <script type="text/javascript" src="js/underscore-1.3.1.js"></script> <script type="text/javascript" src="js/backbone.js"></script> <script type="text/coffeescript" src="t02_Router.coffee"></script> </body> </html>
<<< t02_Router.coffee ----------------------------------->>>
$ = jQuery
$ ->
class ButtonsView extends Backbone.View
el: '#buttons'
events:
'click': 'onClick'
onClick: (event)->
switch $(event.target).attr('id')
when 'b1'
@router.navigate '', {trigger: true}
when 'b2'
@router.navigate 'help/有問題:好用嗎', {trigger: true}
when 'b3'
@router.navigate 'search/b3', {trigger: true}
class MyRouter extends Backbone.Router
routes:
'': 'index'
'help/*quiz': 'help'
'search/:query': 'search'
index: ->
console.log 'index'
help: (quiz)->
console.log quiz
search: (query)->
console.log query
myRouter = new MyRouter
buttonsView = new ButtonsView
buttonsView.router = myRouter
Backbone.history.start()
沒有留言:
張貼留言