27

それぞれ異なる el 属性を持つ 2 つ (またはそれ以上) のビュー インスタンスを作成し、backbone.js ビューのイベント ハッシュ ( jQuery ではなく) を介してイベントをバインドしたいと考えています。

すべてのインスタンス化が同じ場合にトリガーするイベントを取得するのelは簡単です。

someView = Backbone.View.extend({
  el: '#someDiv',

  events: {
    'click': 'someFunction'
  },

  someFunction: function(){
    //Do something here
  }
});

これまでのところ、関数に割り当てelて、次のように通常どおりに設定すると、イベントはトリガーされません。initializeevents

someView = Backbone.View.extend({
  events: {
    'click': 'someFunction'
  },

  initialize: function( options ){
    this.el = options.el
  },

  someFunction: function(){
    //Do something here
  }
});

私の最初の本能はel、対象の dom 要素の文字列表現を返す関数にすることでした。

someView = Backbone.View.extend({
  el: function(){
    return '#someDiv-' + this.someNumber
  },

  events: {
    'click': 'someFunction'
  },

  initialize: function( options ){
    this.someNumber = options.someNumber
  },

  someFunction: function(){
    //Do something here
  }
});

ただし、someFunctionのインスタンス化が x 回ある場合、これは x 回トリガーされますsomeView。

次に、 と の両方の属性を設定してみelましeventsたinitialize:

someView = Backbone.View.extend({

  initialize: function( options ){
    this.el = options.el
    this.events = {
      'click': 'someFunction'
    }
  },

  someFunction: function(){
    //Do something here
  }
});

ただし、これはイベントをトリガーしません。この時点でかなり釣れます。

elの他のインスタンスではなく、そのインスタンスのみをトリガーするイベントを持つそのインスタンスに固有の backbone.js ビューをインスタンス化する方法を知っている人はいViewますか?

4

1 に答える 1

55

実際には、「this.element」のすべてを実行する必要はありません。

バックボーンは、ビューの「el」を、オプションとしてコンストラクターに渡す「el」に自動的に設定します。

その後、ビュー全体で「this.el」として使用できます。

これはあなたがする必要があるすべてです：

x = Backbone.View.extend({
    events: {
      'click': 'say_hi'
    },

    initialize: function( options ){
        // Not actually needed unless you're doing something else in here
    },

    say_hi: function(){
      alert( this.el.id );
    }

  });

y = new x( {el: '#div-1'} );
z = new x( {el: '#div-2'} );

z.say_hi();
y.say_hi();
​

このライブ jsFiddle を参照してください: http://jsfiddle.net/edwardmsmith/QDFwf/15/

2 番目の例が機能しなかった理由は、Backbone の最新バージョンでは、「el」を直接設定することができなくなったためです。お気づきのように、これはイベントを適切に設定/更新しません。

動作しません

initialize: function( options ){
  this.el = options.el;
}

そのように el を動的に設定したい場合は、View.setElementを使用してイベントを適切に委任し、キャッシュされたthis.$elを設定する必要があります。

作品

initialize: function( options ){
  this.setElement(options.el)
}

2 番目の例のライブ jsFiddle: http://jsfiddle.net/edwardmsmith/5Ss5G/21/

しかし、これは Backbone の内部で既に行われていることをやり直しているだけです。

于 2012-06-26T15:41:49.117 に答える