web-dev-qa-db-ja.com

バックボーンのイベントに引数を渡す

まず第一に、私はいくつかの検索を行いましたが、stackoverflow/googleで答えがありませんでした。

これが私のコードのスニペットです：

//in the view
this.collection.on("add",triggerthis)
this.collection.add(predefinedModel)
triggerthis: function(a, b, c, d){
    //etc.
}

基本的に、addで引数を渡し、triggerthisで引数を受け取ることができるようにしたいと思います。これは可能ですか？

前もって感謝します。

javascripteventsbackbone.jsbackbone-events
14
chenglou

文書化されていない機能を使用せずに、これを希望どおりに行うことはできません。

_Collection#add_ を見ると、次のように表示されます。

_add: function(models, options) {
  //...
  for (i = 0, l = add.length; i < l; i++) {
    (model = add[i]).trigger('add', model, this, options);
  }
  //...
}
_

triggerの4番目の引数に注意してください。そして、文書化されたインターフェースを見ると trigger ：

トリガーobject.trigger(event, [*args])

指定されたevent、またはスペースで区切られたイベントのリストに対してコールバックをトリガーします。 triggerへの後続の引数は、イベントコールバックに渡されます。

したがって、addはリスナーをf(model, collection, options)として呼び出します。ここで、optionsは_Collection#add_に渡したものと同じoptionsです。その結果、これを行うと次のようになります。

_this.collection.add(predefinedModel, { undocumented: 'arguments' })
_

次に、コールバックでこれを行うことができます。

_triggerthis: function(model, collection, options) {
    console.log(options.undocumented);
}
_

デモ： http://jsfiddle.net/ambiguous/bqWwQ/

もちろん、この方法でoptionsを介して配列またはオブジェクト全体をトンネリングすることもできます。

_"add"_イベントの3番目の引数は文書化されていません（少なくとも私が見つけることはできません）。これに関する文書化に最も近いのは .3.3変更ログエントリ のメモです：

ユビキタスなoptions引数が、すべての_"change"_イベントの最終引数として渡されるようになりました。

このアプローチはお勧めしませんが、必要に応じて利用できます。もちろん、これをテストスイートでカバーする必要があり、Backboneが使用するoptionsのキーを使用しないようにする必要があります。

より安全なアプローチは、モデルにいくつかの追加のプロパティをアタッチすることです。

_model.baggage = { some: 'extra stuff };
_

次に、コールバックでそれをはがします。

_triggerthis: function(model, collection) {
    var baggage = model.baggage;
    delete model.baggage;
    //...
}
_

デモ： http://jsfiddle.net/ambiguous/M3UaH/

また、さまざまな目的でさまざまなコールバックを使用したり、追加のパラメーターを本格的なモデル属性として渡すこともできます。

__.bind_ ：もあります。

_this.collection.on("add", _.bind(function(collection, model, extra) { ... }, context, collection, model, 'whatever you want'));
_

ただし、引数は左から右にバインドされるため、コールバックに必要な引数をall指定する必要があります。

デモ： http://jsfiddle.net/ambiguous/jUpJz/

30
mu is too short

関数に渡される値が常に同じである場合は、 部分的に適用_.bind（または可能な場合はネイティブのFunction.bind）を使用してそれを行うことができます。

例えば。ハンドラーをaddにバインドする場所（triggerThisがビュー内のメソッドであると想定）：

this.collection.on('add', _.bind(this.triggerThis, this, a, b, c, d));

triggerThisの定義：

triggerThis: function(a, b, c, d /*, model, collection, options - if you need them*/) {
  ...
}

individualadd呼び出しに引数を渡したい場合は、2番目のoptionsパラメーターをaddに使用して次に、イベントハンドラーでそれを処理します。

例えば。

this.collection.on('add', this.triggerThis, this);
this.collection.add(model, {
  someCustomValue: 'hello';
});

次に、ハンドラーで：

triggerThis: function(model, collection, options) {
  var val = options.someCustomValue;
  ...
}
6
jimr