1

在我的 Backbone 应用程序中单击选项卡时，路由按预期工作并呈现适当的视图：

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，突出显示“关于”选项卡。也许我忽略了一些东西，也许上面是疯狂的，根本不是最佳实践。

附加应用程序的模型：

在此处输入图像描述

4

1 回答 1

1

我假设您的标签链接看起来像这样：

<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-27T11:59:34.597 回答