2013-11-23 5 views
10

この例では、同じプロパティに動的にバインドされた入力とdivがあります。 しかし、入力のテキストを変更すると、変更はdiv要素に反映されません。変更に応答しないapplyBindingsToNodeを持つ動的バインドされた要素

http://jsfiddle.net/rpuri/Bcps5/

ko.applyBindingsToNode(document.getElementById('input-health'), { 
    value: vm.status(), 
    valueUpdate: 'afterkeydown' 
}); 

バインディング宣言私は部分的なビュー(ASP.NET MVC)内の共有の要素にバインドする必要があるため、私のためのオプションではありません。あなたは、観察の値の代わりに観察自体に結合されている

おかげ

+0

あなたが部分図で共有要素をバインドする必要があるという事実は、宣言型バインディングがオプションではないことを意味し、なぜ私は理解していません。あなたはそれについて精緻化してもらえますか? –

+0

場合によっては、選択リストと入力フィールドがフォームの作成と検索/フィルタリングフォームで使用されるためです。私はアプリケーション全体を通して部分的なビューとしてフォームを共有しています。選択リストは、キャッシュされたリポジトリを使用してサーバー側でバインドされます。 – puri

+1

テンプレートバインディングを使用するとどうなりますか? –

答えて

12

試してみてください。

ko.applyBindingsToNode(document.getElementById('health'), { 
    text: vm.status, // <- not invoking status, binding to the observable itself. 
    valueUpdate: 'keydown' 
}); 

ko.applyBindingsToNode(document.getElementById('input-health'), { 
    value: vm.status, 
    valueUpdate: 'keydown' 
}); 

http://jsfiddle.net/hwQsm/

+0

しかし、私は自分の財産が入れ子になっていることに気づいたそれでは、この仕事の様子はどうですか?value:vm.Person()。status? – puri

+1

これはうまくいくかもしれませんが、あなたのコードが見えなくてもわかりません - 自己完結型の短いコード例を作成してもよろしいですか? –

+0

ありがとう非常に良い! –

0

私は、前処理機能(ノックアウト3)を使用。

<input type="text" data-bind="value: LastName, vuClass: 'text'" /> 

ko.bindingHandlers.vuClass = { 
    preprocess: function (value, name, addBindingCallback) { 
     if (value == "'text'") { 
      addBindingCallback('valueUpdate', "['afterkeydown', 'blur']"); 
     } 

     // ... 
     // Check other values. 
     // ... 

     return value; 
    } 
}; 
関連する問題