2016-08-31 7 views
1

私は単純なチェックボックスを持っています。これはビューモデルから独自のvalue属性を取得します。クリックすると、その値を関数に返す必要があります。それ、どうやったら出来るの? ノックアウト:データバインドされた入力値をクリック時の機能に戻す方法を教えてください。

は、私はこれを試みたが、値が

<input class="cards-view--item-checkbox pull-right" type="checkbox" 
data-bind="value: universalParcelId, click: $root.addUniversalParcelIDtoArray(value)" /> 

答えて

2

clickバインディングのパラメータは、そのイベントに対して実行される関数です。それは表現ではありません。 http://mbest.github.io/knockout.punches/を使用している場合は、on.clickバインディングを使用して式を指定できます。また、要素のプロパティを取得するには、$elementを使用します。答えを

click: function(data, event) { $root.handleClick($element.value, data, event) } 
+0

これは素晴らしい動作します。ありがとう。しかし、関数ラッパーを使うために '$ data'や' $ event'のような追加のパラメータを得ることができませんでした。 – TetraDev

+1

この例を編集します。 –

+0

優れています。それは動作します。私はあなたの答えを受け入れています。私はまた、 "true/false"のパラメータを送ることによって、入力がチェックされているかどうかを渡そうとしています。それを行う簡単な方法はありますか? – TetraDev

1

これはかなりうまく結合クリックためknockout documentationで覆われている動作しませんでした。これが実際に処理できる方法はいくつかあります。クリックバインディングを使用するたびに、コンテキストのデータが関数内の「this」に渡されます。したがって、 "value"が現在のコンテキストでモデル上のプロパティである場合は、ほとんど何も渡す必要はありません。 (ドキュメントの注1を参照してください)

var rootModel = function(){ 
    var self = this; 
    self.addUniversalParcelIDtoArray = function() { 
     console.log(this.value); 
    } 
} 

ただし、現在のコンテキストでデータ以外に何かを渡す必要があるかもしれません。その場合、追加のパラメータを追加する.bind関数を使用することができます。 $データは、$ parentコンテキストのvalueプロパティに加えて、現在のコンテキストから "this"にモデルを渡します。 (ドキュメントの注2を参照してください)

<input class="cards-view--item-checkbox pull-right" type="checkbox" 
data-bind="value: universalParcelId, click: $root.addUniversalParcelIDtoArray.bind($data, $parent.value)" /> 
+0

'$のdata'は "未定義" と' $親を通じて来た:

click: function(data, event) { $root.addUniversalParcelIDtoArray(data, event, 'param1', 'param2') }

はここaddUniversalParcelIDtoArray機能です:私は、私が使用して終了

event.target.valueを使用して値を取り出しました。値は '$ data'が通常もたらすものと一緒に来ました。何かがそれで動作しませんでした。 – TetraDev

0

ありがとう:ここ

は、あなたが機能を提供したい方法です。 $ dataと$ eventオブジェクトとカスタムパラメータを渡すための値を取得するには少し違っていました。

addUniversalParcelIDtoArray: function (data, event, 'param1', 'param2') { 
    var self = monsoon.Search; 
    self.universalParcelIDArray.push(event.target.value); 
    return true; // allow the default "click" action, which is checking the box with a "check" 
}, 
関連する問題