Использовать маршрутизатор Backbone.js с #!

Question

При использовании Backbone Router он будет обрабатывать маршрут «страница» как #page.

Могу ли я сделать #! как по умолчанию вместо #?

Я хотел бы сделать html 4 браузеров использовать #! (http://example.com/#!/page/subpage), а браузеры с историей html5 используют обычный адрес, например http://example.com/page/subpage, без необходимости использовать «! page» в качестве маршрута.

"#!" это сделать страницу ajax сканируемой. См. http://code.google.com/web/ajaxcrawling/ для получения дополнительной информации.

Answer 1

Я dediced использовать следующий подход:

//Create the Route without routes (just the functions) 
App.Router = Backbone.Router.extend({ 
    "quem-somos": function() { 
     alert("quem-somos"); 
    } 
}); 
//test for html5 history using Modernizr and instantiate the Route with normal urls for true and prefixed routes for false 
if(Modernizr.history){ 
    App.routePrefix=""; 
    App.router = new App.Router({ 
     routes:{ 
      "quem-somos" : "quem-somos" 
     } 
    }); 
}else{ 
    App.routePrefix="!/"; 
    App.router = new App.Router({ 
     routes:{ 
      "!/quem-somos" : "quem-somos" 
     } 
    }); 
} 
Backbone.history.start({pushState: true}); 
//Call navigate when clicking a button 
    App.router.navigate(App.routePrefix+"quem-somos",{trigger: true, replace: true}); 

Таким образом я получаю http://example.com/quem-somos и http://example.com/#!/quem-somos для каждого типа браузера.

Answer 2

После просмотра у источника Backbone.js, это выглядит как хэш-теге Backbone.History модуль использует закодирована в.

Самый простой способ изменить это изменить сам источник, в строке 741 (Backbone 0.5.3):

var hashStrip = /^#*/; 

должен быть изменен на:

var hashStrip = /^#!*/; 

Кроме того, необходимо изменить функцию navigate в Backbone.History, чтобы убедиться, что "!" появляется. В строке 863:

window.location.hash = this.fragment = frag; 

должен быть изменен на:

window.location.hash = this.fragment = "!" + frag; 

К сожалению, из-за того, как это было написано в Backbone.js, я не уверен, что есть более элегантный способ исправить это.

Answer 3

Вы можете просто добавить !/ свои маршруты:

routes: { 
    "!/help":     "help", // #!/help 
    "!/page/:subpage":  "search", // #!/search/kiwis 
    "!/page/:subpage/p:page": "search" // #!/search/kiwis/p7 
}, 

Тогда вы получите полный http://example.com/#!/page/subpage URL.