带有Twitter Bootstrap选项卡的Backbone.js -删除链接中的#

Question

我使用的是Twitter bootstrap的tab插件，它要求激活到tab的链接包含以#开头的URL片段，然后是包含tab的HTML内容的div的id。

 <a href="#home" data-toggle="tab">Home</a>
 <div class="tab-pane" id="home">...</div>

有什么方法可以摆脱使用#的麻烦吗？此外，我尝试删除链接中的#，但不知何故点击该链接并不能使浏览器跟随该链接！

我使用的是backbone.js和pushstates，所以我希望这个链接不包含#，点击它应该会将网址更新为mydomain.com/home而不是mydomain.com/#home。

 <a href="home" data-toggle="tab">Home</a>
 <div class="tab-pane" id="home">...</div>

还有..。

$(function() {
    $('a[data-toggle="tab"]').on('shown', function(e) {
        // Update URL in address bar to trigger Backbone.js's router
        window.location.hash = e.target.hash;
    });
});

这可以做到吗？或者我最好使用backbone.js来编写我自己的选项卡功能？

Answer 1

我可以看到有不同类型的标签，如果你遵循基本标签的例子，而不是Tabbable的例子，这是不是不起作用？

http://twitter.github.com/bootstrap/components.html#navs

我认为这里的主要问题是Tabbable示例使用了一个可能与backbone.js绑定冲突的jQuery插件。

Answer 2

属性上设置data-url属性。

然后做一些类似的事情：

events:
  'show .nav-tabs a': 'navigateTab'

navigateTab: (e) ->
  target = $(e.currentTarget)
  @router.navigate(target.data('url'), trigger: false)