2 
私は2つの見解を持っています:
   1 つの LeftView (RightView が最小化されている場合は最大化され、その逆も同様)
   2 RightView (含む)
      - のコレクション
         - RightItemView (RightItemModel のレンダリング)

RightView が最大化され、ユーザーが RightItemView をクリックすると、LeftView を最大化し、クリックされた RightItemView のデータに従って何かを表示したいと考えています。

それらを配線する適切な方法は何ですか？

4

3 に答える 3

2

Backbone.Events モジュールの使用をお勧めします。

http://backbonejs.org/#Events

基本的に、この行だけでイベント ディスパッチャーを作成できます。

var dispatcher = _.clone(Backbone.Events);

その後、グローバル ディスパッチャーを使用して、すべてのビューでイベントをトリガー/リッスンできます。

したがって、RightItemView では、クリック イベントで次のようなことを行います。

dispatcher.trigger('rightItemClick', data); // data is whatever you need the LeftView to know

次に、LeftView の初期化関数で、イベントをリッスンし、関連する関数を呼び出すことができます。

dispatcher.on('rightItemClick', this.maximizeAndDisplayData);

LeftView に次のような機能があると仮定します。

maximizeAndDisplayData: function(data) {
    // do whatever you need to here
    // data is what you passed with the event
}
于 2012-11-25T19:16:45.623 に答える
2

@ jordanj77が言及したソリューションは、要件を達成するための正しい方法の1つです。好奇心から、同じ効果を達成する別の方法を考えました。2 つのビュー間の通信にセパレートを使用する代わりにEventDispatcher、基になるモデルを として使用しないのはなぜEventDispatcherですか? それらの線で考えてみましょう。

まず、というモデルに新しいboolean属性を追加し、デフォルトで に設定します。ユーザーが を選択するたびに、モデルの属性を true に設定します。これにより、モデルでイベントがトリガーされます。RightItemcurrentfalseRightItemViewcurrentchange:current

var RightItem = Backbone.Model.extend({
  defaults: {
    current: false,
  }
});

var RightItemView = Backbone.View.extend({
  events: {
    'click li': 'changeCurrent'
  }

  changeCurrent: function() {
    this.model.set('current', true);
  }
});

一方、作成時LeftViewにモデルの Backbone.Collection が渡されます。RightItemとにかく、このインスタンスを提供する必要RightViewがありますね。その初期化メソッドで、はイベントLeftViewをリッスンしchange:currentます。イベントが発生すると、現在表示しているモデル LeftViewの属性を false に変更し、このイベントをトリガーした新しいモデルの表示を開始します。current

var LeftView = Backbone.View.extend({
  initialize: function() {
    this.collection.on('change:current', this.render, this);
  },

  render: function(model) {
    // Avoid events triggered when resetting model to false
    if(model.get('current') === true) {

      // Reset the currently displayed model
      if (this.model) {
        this.model.set('current') = false;
      }

      // Set the currently selected model to the view
      this.model = model;

      // Display the view for the current model
    }
  }
});

var leftView = new LeftView({
  // Use the collection that you may have given the RightView anyways
  collection: rightItemCollection 
});

EventDispatcherこのようにして、 to ブローカーを使用する代わりに、Left View と Right View の間の通信手段として、基礎となるモデルを使用することができます。

于 2012-11-25T20:12:03.447 に答える
1

@Ganeshjiによって提供されたソリューションは、実際の例を作成するように私を刺激しました

このために2つのビューを作成しました。

var RightView = Backbone.View.extend({
  el: $('.right_view'),

  template: _.template('<p>Right View</p>'),

  renderTemplate: function () {
      this.$el.html('');
      this.$el.append(this.template());  
      this.$link = this.$el.append('<a href="#" title="some data" id="left_view_max">Item to view</a>').children('#left_view_max'); 
  },

  events: {
      'click #left_view_max'    :   'maxLeftView'
  },

  maxLeftView: function () {
    //triggering the event for the leftView
    lView.trigger('displayDataInLeftView', this.$link.attr('title'));
  },

  initialize: function (options) {  
      this.renderTemplate();
  }
});

var LeftView = Backbone.View.extend({
  el: $('.left_view'),

  template: _.template('<p>Left View</p>'),

  renderTemplate: function () {
      this.$el.html('');
      this.$el.append(this.template());
  },

  displayDataInLeftView: function (data) {
    this.$el.append('<p>' + data + '</p>');
  },

  initialize: function (options) {
    //set the trigger callback
    this.on('displayDataInLeftView', this.displayDataInLeftView, this);
    this.renderTemplate(); 
  }
});

 var lView = new LeftView();
 var rView = new RightView();

お役に立てれば。

于 2012-11-25T22:15:20.617 に答える