主干中的选项卡答案

【问题标题】：Tabs in Backbone主干中的选项卡
【发布时间】：2012-07-21 21:50:24
【问题描述】：

我是 Backbone 的新手，我正在制作一个示例应用程序，其中必须包含选项卡。问题是我有一组城市，我想为每个城市创建一个选项卡（该集合从服务器获取）。我创建了一个名为 TabsView 的视图，它在渲染函数中将集合传递给模板，然后这个模板循环遍历集合并呈现选项卡。

我想要做的是第一个标签显示为“活动”。我目前所做的是，每个选项卡都有一个指向路由器中路由的 href，该路由使用 jquery 将其类更改为活动。不知道这是否是最好的方法，但它有效。也许有更好的方法。另外，当用户单击一个选项卡时，我希望能够呈现其他视图。

希望我说清楚了。谢谢，干杯，

马丁

【问题讨论】：

标签： backbone.js tabs

【解决方案1】：

好的，我通过以下方式解决了这个问题：

var Tabs = Backbone.View.extend({
  template: JST['tabs'],

  events: {
    'click li' : 'switchTab'
  },

  tagName: 'ul',

  className: 'nav-tabs',

  render: function() {
    this.renderTabs();
    return this;
  },

  renderTabs: function() {
    this.$el.html(this.template({ cities: this.cities }));
    this.$('li:first').addClass('active');
  },

  switchTab: function(event) {
    var selectedTab = event.currentTarget;
    this.$('li.active').removeClass('active');
    this.$(selectedTab).addClass('active');
  }
});

效果很好，也许可以改进。

【讨论】：