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 - 将类添加到选项卡

回答

相关问题