Looking for knockout.js Answers? Try Ask4KnowledgeBase
Looking for knockout.js Keywords? Try Ask4Keywords

knockout.jsバインディング


構文

  • <!-- 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 });
    }
};
  1. バインディングには名前 - debugがありますので、次のように使用できます。

data-bind="debug: 'foo'"

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

かっこを使用する場合

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

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も参照してください。

バインディング 関連する例