<!-- ko if:myObservable --><!-- /ko -->
<i data-bind="if:myObservable"></i>
基本的にバインディングまたはデータバインディングは、ViewModelをビュー(テンプレート)にリンクする方法で、その逆もあります。 KnockoutJSは双方向データバインディングを使用しています。つまり、ViewModelへの変更はViewに影響し、Viewへの変更はViewModelに影響します。
バインディングは、特定のタスクを解決するためのプラグイン(スクリプト)です。このタスクは、あなたのViewModelに従ってマークアップ(html)を変更することが多いです。
たとえば、 text
バインディングを使用すると、ViewModelが変更されるたびにテキストを表示し、動的に変更することができます。
KnockoutJSには多くの強力なバインディングが付属しており、独自のカスタムバインディングで拡張することができます。
そして最も重要なのは、バインディングは魔法ではなく、一連のルールに従って動作し、バインディングが何であるか、どのパラメータが必要なのか、バインディングのソースコードを参照できるビューをいつ更新するのかは不明です。
カスタムバインディングの次の例を考えてみましょう。
ko.bindingHandlers.debug = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
ko.computed(function () {
var value = ko.unwrap(valueAccessor());
console.log({
value: value,
viewModel: viewModel,
bindingContext: bindingContext
});
}, null, { disposeWhenNodeIsRemoved: element });
}
};
debug
がありますので、次のように使用できます。 data-bind="debug: 'foo'"
init
メソッドは、バインディングが開始されると一度呼び出されます。残りの更新は、 element
が削除されたときに配置される匿名計算によって処理されます。 foo
(この値は、 ko.unwrap
メソッドを使用して読み取ることができるため、この値も現在のviewModelとbindingContextです)。 ko.virtualElements.allowedBindings.debug
フラグがtrueに設定されていないため、仮想要素(htmlコメント)では使用できません。実際の要素でのみ使用できます。 追加のプラグインがなければ、KnockoutJSはViewModel上のプロパティのライブビュー更新のみを観測可能 (通常observable
、 computed
、 pureComputed
、 observableArray
など)にします。オブザーバブルは次のように作成されます:
var vm = { name: ko.observable("John") };
この場合、 vm.name
は2つのvm.name
「モード」を持つ関数です。
vm.name()
は、現在の値を取得します。 vm.name("Johnnyboy")
は、新しい値を設定します。 組み込みのデータバインディングでは、ゲッターフォームをいつでも使用できます。実際にはカッコを省略することもあり、バインディングによって効果的に追加されます。したがって、これらは同等です:
<p data-bind="text: name"></p> ... will work
<p data-bind="text: name()"></p> ... works too
しかし、これは失敗します:
<p data-bind="text: 'Hello, ' + name + '!'"></p> ... FAILS!
値の比較を含めてデータバインディングに値を渡す前に何かをしたいと思うとすぐに、すべてのオブザーバブルの値を適切に "取得"する必要があります。
<p data-bind="text: 'Hello, ' + name() + '!'"></p> ... works
詳細はこのQ&Aも参照してください。