BackboneJS - 將類添加到選項卡

我有一個子菜單，有3個錨點，點擊後，這些選項卡成爲附加類activeSubLink - 指示哪個選項卡處於活動狀態，顯示相關的集合。現在，默認情況下，當我渲染包含子菜單的視圖時，我希望第一個錨具有前面提到的類，並顯示相關的集合。到現在爲止還挺好。當我擊中第三個錨點時，它將變成activeSubLink-類別並顯示相關的集合。到現在爲止還挺好。現在，當我切換到不同的頁面/視圖並使用子菜單再次返回到我的頁面/視圖時，它仍會顯示我切換到其他頁面之前所選標籤的集合，但activeSubLink -class現在再次設置爲默認，這意味着第一個錨/標籤有主動類，但在這種情況下顯示錯誤的集合...BackboneJS - 將類添加到選項卡

我該如何解決這個問題？

我的HTML模板看起來像這樣（使用HandlebarsJS）

<ul> 
    <li> 
    <a id="sub1" class="sub1 activeSubLink" href="#">Subpage1</a> 
    </li> 
    <li> 
    <a id="sub2" class="sub2" href="#">Subpage2</a> 
    </li> 
    <li> 
    <a id="sub3" class="sub3" href="#">Subpage3</a> 
    </li> 
</ul>

和我的視圖看起來是這樣的：

var SubMenuView = Backbone.View.extend({ 

    template: Handlebars.compile(Template), 

    initialize: function() { 
     _.bindAll(this); 
    }, 

    events: { 
     'click .sub1': 'subpage1', 
     'click .sub2': 'subpage2', 
     'click .sub3': 'subpage', 
    }, 

    subpage1: function(event) { 
     event.preventDefault(); 
     $('.sub2, .sub3').removeClass('activeSubLink'); 
     $('.sub1').addClass('activeSubLink'); 
     $("#subpage2Div, #subpage3Div").removeClass('activetab'); 
     $("#subpage1Div").addClass('activetab'); 
    }, 

    subpage2: function(event) { 
     event.preventDefault(); 
     $('.sub1, .sub3').removeClass('activeSubLink'); 
     $('.sub2').addClass('activeSubLink'); 
     $("#subpage1Div, #subpage3Div").removeClass('activetab'); 
     $("#subpage2Div").addClass('activetab'); 
    }, 

    subpage3: function(event) { 
     event.preventDefault(); 
     $('.sub2, .sub1').removeClass('activeSubLink'); 
     $('.sub3').addClass('activeSubLink'); 
     $("#subpage1Div, #subpage2Div").removeClass('activetab'); 
     $("#subpage3Div").addClass('activetab'); 
    },    

    render: function() { 
     $(this.el).html(this.template()); 
     return this; 
    } 

}); 

return SubMenuView;

我種得到了什麼問題，但不知道如何解決這個問題...

來源

2014-01-27 SHT

click事件，您可以用正確的語法''Subpage1開始;錯過了'>'。 –

@RoyMJ是的，剛剛看到它，我的錯誤： - ）...我輸錯了這裏 – SHT

要重置視圖，請使用您已擁有的邏輯，只需點擊render方法中的第一個選項卡即可。

render: function() { 
    $(this.el).html(this.template()); 
    this.$('.sub1').click(); // Click on the first tab 
    return this; 
}

當您切換回頁面/視圖時，您將需要確保render被調用。

來源

2014-01-27 13:44:28 MeWillWork4Food

好的方法，這就是我想要的.. :-) – SHT

我可能需要一些更多的細節，但通常你會做這樣的事情：

店哪個選項卡是活躍在模型
上render，負載的選項卡被激活並設置相應的選項卡的類

您可能想重構一些代碼，您必須對常用設置標籤進行更多設置。例如，而不是在.sub1.sub2.sub3點擊事件，只需添加一個類sub到所有選項卡，並就.sub

來源

2014-01-27 13:44:56 Milimetric

你也許有一些例子給你的建議？ – SHT

對不起，沒有例子，給骨幹文件一個閱讀雖然。這聽起來像模型的工作方式將值得瀏覽。 – Milimetric

BackboneJS - 將類添加到選項卡

回答

相關問題