兩方面的路線功能

當點擊我的骨幹一個標籤應用程序中的線路按預期和渲染相應的視圖：兩方面的路線功能

switchView: function(event) { 
    event.preventDefault(); 

    // Get clicked tab 
    var target = $(event.currentTarget); 

    // Tab is already selected - do nothing 
    if (target.parent().hasClass('selected')) { 
     return; 
    } 

    // First remove selected status on all tabs 
    this.$el.find('li').removeClass('selected'); 

    // Then select the clicked tab 
    target.parent().addClass('selected'); 

    // Switch to new view 
    var fragment = target.attr('href').split('#'); 
    Backbone.history.navigate(fragment[1], true); 
}

什麼我不知道是寫的時候，我可以怎麼引起相同的功能地址欄中的URL是否匹配？例如。 mydomain.com/app.html#section/about導致「關於」選項卡突出顯示。也許我忽略了一些東西，也許上面是瘋狂而不是最佳實踐。

附加應用的樣機：

enter image description here

來源

2013-02-27 jlowgren

我最後一次檢查有沒有''爲Backbone.History' navigate'方法。您應該在您的'Backbone.Router'實例上調用'navigate'方法 – neebz 2013-02-27 11:13:06

@nEEbz，'Backbone.history'具有'navigate'方法。 'Router.navigate'在內部調用它。 – jevakallio 2013-02-27 11:49:23

我會假設你的標籤的鏈接是這個樣子：

<ul> 
    <li><a href="#section/home">Home</a></li> 
    <li><a href="#section/products">Products</a></li> 
</ul>

你不應該趕上click事件的導航鏈接即刪除您的switchView和關聯的事件綁定。相反，您應該讓Backbone.history捕獲散列更改並觸發路由。

要實現選項卡更改行爲，您可以在視圖中訂閱route事件。這將處理由您的標籤鏈接觸發的標籤更改以及其他URL更改。

var TabView = Backbone.View.extend({ 
    initialize: function() { 
    this.listenTo(Backbone.history, 'route', this.onRouteChanged); 
    }, 

    onRouteChanged: function() { 

    //get current url hash part 
    var hash = Backbone.history.getHash(); 

    //find the link that has a matching href attribute 
    var $activeTab = this.$("a[href=#'" + hash + "']"); 

    //if route matched one of the tabs, update tabs. 
    if($activeTab.is("a")) { 

     // First remove selected status on all tabs 
     this.$('li.selected').removeClass('selected'); 

     // Then select the clicked tab 
     $activeTab.parent().addClass('selected'); 
    } 
    } 
});

//代碼示例沒有測試

來源

2013-02-27 11:59:34 jevakallio

謝謝，效果很好。 – jlowgren 2013-02-27 12:24:41

兩方面的路線功能

回答

相關問題