Question

我有一个带有3个anchortabs的子菜单，点击后，这些标签成为附加类activeSubLink - 表示哪个标签处于活动状态，显示相关的集合。现在默认情况下，当我渲染包含子菜单的视图时，我希望第一个锚具有之前提到的类，显示相关的集合。到现在为止还挺好。当我点击第3个锚点时，它变为activeSubLink - 类并显示相关集合。到现在为止还挺好。现在，当我切换到不同的页面/视图并使用子菜单再次返回到我的页面/视图时，它仍会显示我选择的选项卡中的集合，然后切换到不同的页面，但activeSubLink - 类现在是再次设置为默认值，这意味着第一个锚点/选项卡具有活动类，但在这种情况下显示错误的集合......

我该如何解决这个问题？

我的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;

我有点问题但是不知道如何解决它......

Answer 1

要重置视图，请使用您已有的逻辑，只需单击render方法中的第一个选项卡。

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

当您切换回页面/视图时，您需要确保调用render。

Answer 2

我可能需要更多细节，但通常你会做这样的事情：

存储哪个标签在模型中处于活动状态
在render上，加载哪个标签处于活动状态并设置相应标签的类

您可能希望重构一些代码以更一般地设置标签。例如，代替.sub1 .sub2 .sub3上的点击事件，只需向所有标签添加一个类sub，然后在.sub上点击一下即可

BackboneJS - 将类添加到选项卡

2 个答案: