2011-10-02 41 views
10

我想繞過backbone.js,但由於缺乏(IMO)很好的例子,我發現它很難。用backbone.js創建鏈接的首選方式

首先,獲取鏈接到對象的最佳方式是什麼?
如果我想獲得Album模型的編輯網址,我可以做album.url() + '/edit',這真的是最好的方法嗎?

此外,我試圖使我的應用程序工作100%沒有JavaScript,所以我不希望我的網址/鏈接說/albums/#1/edit,我希望它是/albums/1/edit並在JS中覆蓋此。

我想我創造正常的網址,並使用jQuery.live調用router.navigate在Backbone.js的
我從來沒有然而這個工作,當我打電話router.navigate('/albums/2', true)的URL的變化,但我的表演動作不會被調用。如果我刷新它的名稱,那麼路線就會匹配。

我錯過了什麼?

回答

18

基本答案有點令人沮喪,「沒有優先選擇!」。 Backbone.js不會告訴你如何設置鏈接,你可以用任何你喜歡的方式來完成。至少在一開始,我發現這種靈活性就像您一樣煩人。

因此,這裏是我的my current project處理這個方式,與(大)警告,這只是衆多方法來做事的骨幹之一:

  • 在大多數情況下,我不沒有使用實際的鏈接。沒有明確的理由不這樣做,但這意味着你必須跟蹤一堆必須一致的URL字符串。我寧願將所有的URL格式保存在我的路由器中,而不是在其他地方處理。

  • 要打開一個新的「頂級」視圖,就像編輯屏幕一樣,我設置了一些引發事件的東西。在我目前正在研究的應用程序中,我有一個全局狀態模型,並打開一個新視圖,我稱之爲state.set({ topview: MyTopView })。這會導致state對象觸發change:topview

  • 頂層視圖更改時需要更改的任何UI界面都有一個綁定到change:topview的更新方法。事件發生時,他們查看state.get('topview')並根據需要進行更新。

  • 我把我的路由器視爲UI的邊緣專用部分 - 它們本質上是在瀏覽器地址欄而不是窗口中呈現的視圖。與其他視圖一樣,它們更新UI事件(即新URL)上的state對象,並且與其他視圖一樣,它們將聽取state對象的更改,以使它們更新。編輯屏幕具有URL albums/<albumid>/edit的邏輯完全封裝在路由器中,我不會在其他任何地方引用它。

這對我很好,但它增加了一個全新的模式,全局狀態對象到主幹結構,所以我幾乎不能稱之爲「首選」方法。

更新:還要注意的是.url(),在骨幹成語,指的是該模型的URL中後端API中,而不是前端URL(它不是像Django的get_absolute_url)。默認Backbone設置中沒有任何方法可爲您提供面向用戶的模型 - 您必須親自編寫此代碼。

+0

偉大的職位!任何想法爲什麼'navigate'不會調用我的路由器? –

+0

我不得不看到更多的代碼 - 傳遞'true'導航應該調用與路由相關的函數,所以無論您的路由不被識別爲匹配路由模式,或者該函數沒有達到您期望的。 .. – nrabinowitz

+0

啊,導航網址必須是一個完全匹配的路線意義我不得不刪除inital/ –

7

此外,我試圖讓我的應用程序工作100%沒有JavaScript;所以我不希望我的URL /鏈接說/albums/#1/edit,我希望它是/albums/1/edit並在JS中覆蓋此項。

你可以做到這一點w/pushState。只是使它能夠在您的通話Backbone.history.start:

Backbone.history.start({pushState: true})

這告訴骨幹使用HTML5歷史API(又名「pushState的」),它採用完整的URL完全像你想。

讀了歷史上的API在這裏:http://diveintohtml5.ep.io/history.html

,我寫了一個2部分組成的系列使用pushState的W /第二部分重點逐步增強骨幹,做你需要什麼:

http://lostechies.com/derickbailey/2011/09/26/seo-and-accessibility-with-html5-pushstate-part-1-introducing-pushstate/

http://lostechies.com/derickbailey/2011/09/26/seo-and-accessibility-with-html5-pushstate-part-2-progressive-enhancement-with-backbone-js/

希望日在幫助:)

+1

現在我正在使用'router.navigate',除非用戶想要回到歷史記錄中,否則它的工作很好,主幹然後調用控制器中的所有先前操作。提交了一個錯誤。謝謝你的信息! –