backbone.js - 主干中的选项卡

Question

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

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

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

马丁

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

它工作正常，也许可以改进。