如何将 Backbonejs 路由器与 Twitter 引导选项卡结合使用？答案

【问题标题】：How to combine a Backbonejs router with Twitter bootstrap tabs?如何将 Backbonejs 路由器与 Twitter 引导选项卡结合使用？
【发布时间】：2014-08-01 07:22:10
【问题描述】：

我有一些 jQuery 代码与 bootstrap 相结合，我想在其中更改一些东西以便我可以使用 Backbone.js。我已经走了很远，但现在我在使用的选项卡上遇到了一些问题。我基本上用this Twitter bootstrap example。我设法显示了选项卡的内容，但选项卡本身看起来并不处于活动状态，这让用户在黑暗中不知道哪个选项卡实际上是打开的）。所以我所追求的是让标签看起来很活跃。

标签本身是这样定义的：

<a id="tab1" href="#/ticket/1">1 Blah Blah</a>

我曾经使用此代码将选项卡设置为活动：

$("#pageTab").on("click", "a", function (event) {
    event.preventDefault();
    $(this).tab('show');
});

不幸的是，我使用 Backbone.js 更改了选项卡的路由，然后我尝试像这样显示选项卡的内容：

var Router = Backbone.Router.extend({
    routes: {
        "": "home",
        "ticket/:ticketId": "ticket"
    }
});

var router = new Router();
router.on("route:ticket", function(ticketId) {
    tabContentView.render({ticketId: ticketId}); // This works
    $(this).tab('show'); // This does not work
});
Backbone.history.start();

我想问题是this 在这里没有引用标签本身。所以我尝试使用：

$("#tab"+ticketId).tab('show');

但不幸的是，这也不起作用。

有人知道我该如何解决这个问题吗？欢迎所有提示！

[编辑] 有没有办法从路由器获取 url 上的点击事件，以便我可以将它与 .tab("show"); 一起使用？

【问题讨论】：

因为 $(this) 在此上下文中不是节点。恕我直言，您应该在视图中封装引导交互并在视图渲染中运行它。 render: function(){ // 制作 html; this.$el.tab('show') }
@Evgeniy - 感谢您的想法，但我有点迷失在您所说的内容中。你能举个例子吗？
签出这个小提琴 - jsfiddle.net/nFbf2 你可以从路由器传递 id 以选择必要的选项卡并呈现视图

标签： javascript jquery twitter-bootstrap backbone.js tabs

【解决方案1】：

没有办法“在路由器中获取点击事件”，但您始终可以决定自己在所需选项卡上触发点击事件。

router.on("route:ticket", function(ticketId) {
    tabContentView.render({ticketId: ticketId});
    $("#tab" + ticketId).trigger('click');
}

【讨论】：