バインディングとは

基本的にバインディングまたはデータバインディングは、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 });
    }
};

0. バインディングには名前 - debugがありますので、次のように使用できます。

data-bind="debug: 'foo'"

1. initメソッドは、バインディングが開始されると一度呼び出されます。残りの更新は、 elementが削除されたときに配置される匿名計算によって処理されます。
2. この値はfoo （この値は、 ko.unwrapメソッドを使用して読み取ることができるため、この値も現在のviewModelとbindingContextです）。
3. 渡された値が変更されるたびに、バインディングは更新された情報をコンソールに出力します。
4. このバインディングは、 ko.virtualElements.allowedBindings.debugフラグがtrueに設定されていないため、仮想要素（htmlコメント）では使用できません。実際の要素でのみ使用できます。

かっこを使用する場合

追加のプラグインがなければ、KnockoutJSはViewModel上のプロパティのライブビュー更新のみを観測可能 （通常observable 、 computed 、 pureComputed 、 observableArrayなど）にします。オブザーバブルは次のように作成されます：

var vm = { name: ko.observable("John") };

この場合、 vm.nameは2つのvm.name 「モード」を持つ関数です。

1. Getter：引数なしのvm.name()は、現在の値を取得します。
2. Setter：引数を指定した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も参照してください。