2

私はバックボーンを初めて使用し、タブを含める必要があるサンプルアプリを作成しています。問題は、都市のコレクションがあり、都市ごとに 1 つのタブを作成したいということです (コレクションはサーバーからフェッチされます)。レンダー関数でコレクションをテンプレートに渡す TabsView というビューを作成しました。これは、コレクションをループしてタブをレンダリングします。

私がやりたいことは、最初のタブが「アクティブ」として表示されることです。私が現時点で行ったことは、各タブにルーターのルートへのhrefがあり、jqueryを使用してそのクラスをアクティブに変更することです。これがこれを行うための最良の方法かどうかはわかりませんが、うまくいきます。たぶんもっと良い方法があります。また、ユーザーがタブをクリックすると、他のビューをレンダリングできるようにしたいと考えています。

私が自分自身を明確にしたことを願っています。ありがとう、乾杯、

マーティン

4

1 に答える 1

4

わかりました。次のような方法でこの問題を解決しました。

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

それはうまく機能します、多分それは改善されることができます。

于 2012-07-23T23:03:28.037 に答える