Backbone.js使用路由歷史api的常用引導模式

我有單頁web應用程序被寫在backbonejs上。我使用不同的路線，每條路線都對應一個控制器。當我加載我的應用根URL（myapp.com/）或任何非根URL（myapp.com/somelocation）時，它可以正常工作。但是，當我嘗試直接將我的應用程序加載到任何具有查詢參數的位置（即myapp.com/somelocation?z=search）時，我遇到了一些麻煩。應用呈現兩次 - 第一次使用與myapp.com/somelocation?z=search對應的正確控制器，第二次使用與myapp.com/somelocation對應的控制器。Backbone.js使用路由歷史api的常用引導模式

路由表是這樣的：

routes: { 
     'login': 'login', 
     'home': 'home', 
     'timeline?*query': 'timelineWithQuery', 
     'timeline': 'timeline', 
     ... 
     '*path': 'defaultRoute' 
    }, ...

控制器是這樣的：

defaultRoute: function() { 
    router.navigate('home', {trigger: true});   
}, 

login: function(args) { 
    var controller = new App.PageController.Mobile.AuthPageController($('body')); 
    controller.executeLogin(args); 
}, 

timeline: function(args) { 
    var controller = new App.PageController.Mobile.TimelinePageController($('body')); 
    controller.executeTimeline(args); 
}, ...

的document.ready腳本是這樣的：

// ... 
router.navigate(window.location, {trigger: true}); 
// ...

如果我不叫router.navigate（window.location，{trigger：true}）;顯式地沒有一個控制器呈現我的應用程序起始頁當我將它稱爲應用程序時，它會正常工作，直到我嘗試從myapp.com/timeline?foo=bar URL開始。如果我這樣做我的應用程序呈現兩次（沒有頁面重新加載）。

有什麼建議嗎？什麼是通用的document.ready引導模式，適用於具有豐富路由場景的骨幹網驅動的單頁應用程序？

來源

2013-07-14 Ivan Velichko

導航使用location.pathname（pushState）或location.hash，因此location.queryString不是導航程序的一部分。我不知道如何將這一行：'timeline?*query': 'timelineWithQuery',轉換爲正則表達式，順便說一句，這並不重要，因爲您將在my/path上運行該正則表達式，而不是my/path?queryString。

您必須在Backbone.history.start({pushState: true})之前定義每條路線。當你調用它時，它應該運行當前的路由，所以你不必在那之後手動調用導航。

來源

2013-07-14 20:14:32 inf3rno

Ofcourse在調用router.navigate（window.location，{trigger：true}）之前，我使用Backbone.history.start（）。我仍然有一些查詢字符串的路線麻煩。 –

看起來我應該在文檔就緒回調中使用Backbone.history.start（{root：window.location}）而不是router.navigate（window.location，{trigger：true}）。但是現在我在鏈接url部分時遇到了一些麻煩。在調用historty.start之後，我的URL看起來像windows.location + windows.location.path。 –

請閱讀更多關於REST服務的信息。 url.path是一個資源標識符，你只能使用它來進行導航。找到資源後，您可以使用url.queryString來過濾或修改輸出。你不應該將url.queryString注入到導航中，這是一個糟糕的做法......你可以使用Backbone來設置和修改url.path，它會自動完成，所以你不必通過導航來使用window.location .. 。首先你創建你的路由器實例。在domReady之後，你開始了歷史。之後，歷史會自動完成一切。 – inf3rno

Backbone.js使用路由歷史api的常用引導模式

回答

相關問題