web-dev-qa-db-ja.com

Knockout.JS：オブザーバブルの変更に基づくトリガー

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

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

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

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

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

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

triggersknockout.jsobservable
24
gzost

購読を使用：

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

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

44
meze

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

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

JS Fiddle例-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>

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

3
Yemi Bedu