26

オブザーバブルのノックアウトにバインドされている入力要素があります。

<input type="text" data-bind="value: myText, valueUpdate: 'keyup'" />

これにより、各キーアップでオブザーバブルが更新されます。値が変更されたときに追加のイベントをトリガーしたいと思います。

以下は、原則としてこれを行います。

this.myTextTrigger = ko.computed( function () {
    console.log( this.myText() );
}, this );

しかし、それはやや不格好なようです。また、テンプレートの最初のインスタンス化でトリガーされ、その後の変更のみを処理します。オブザーバブルの変更に基づいてイベントをトリガーする公式/簡単な方法はありますか？

4

2 に答える 2

48

サブスクライブを使用します。

this.myText.subscribe(function (newText) {
   console.log(newText);
});

このトリガーを再利用したい場合は、カスタムバインディングを作成することを検討できます。

于 2012-09-01T17:36:16.957 に答える
3

バインディングで追加情報を取得しようとしている場合は、関数を指している要素のバインディングの名前を参照するようにパラメーターを使用して設定します。関数リテラルをHTMLに配置するか、ハンドラー定義のスコープ内でその関数を見つけることができることを確認してください（オブジェクトにグローバルにアタッチされている場合など）。allBindings.get(nameOfOtherBinding)nameOfOtherBindingwindow

http://knockoutjs.com/documentation/custom-bindings.html

JSフィドルの例-http://jsfiddle.net/pqb4xubg/

ハンドラーを設定するJavaScript（initまたはupdateのいずれか）：

ko.bindingHandlers.generic = {
    init: function(element, valueAccessor, allBindings){
        var val = 'nothing';
        // set your other bindings to get pulled in
        var func = allBindings.get('func');
        // normal check if the binding is actually a function
        if(typeof func === 'function'){
            // use the retrieved function
            val = func(valueAccessor());
        }
        element.innerText = val;
    }
};
var model = {a:'4', b:5};
ko.applyBindings(model);

ハンドラーを使用するhtml（「fun」バインディングを持つ要素がどのように機能しないかに注意してください）：

<div data-bind="generic: a, func: function( val ){ return val + 2; }"></div>
<div data-bind="generic: a, fun: function( val ){ return val + 2; }"></div>
<div data-bind="text: a"></div>
<div data-bind="generic: b, func: function( val ){ return val + 2; }"></div>
<div data-bind="generic: b, fun: function( val ){ return val + 2; }"></div>
<div data-bind="text: b"></div>

バインドの初期化を使用して標準のDOMイベントハンドラーを設定し、jQueryなどを使用してこれらの関数を明示的に呼び出すこともできます。ありがとうございました。良い一日。

于 2015-06-03T14:59:13.823 に答える