双向路由功能

Question

单击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);
}

我想知道在地址栏中编写匹配的网址时如何才能产生相同的功能？例如。 mydomain.com/app.html#section/about会突出显示“关于”标签。也许我忽略了一些东西，也许上面是疯狂而不是最佳实践。

附加应用的模型：

Answer 1

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

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

您不应该抓住导航链接的click事件，即删除您的switchView和相关的事件绑定。相反，您应该让Backbone.history捕获哈希更改并触发路由。

要实施标签更改行为，您可以在视图中订阅route事件。这将处理由标签链接触发的标签更改以及其他网址更改。

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');
    }
  }
});

//代码示例未经过测试