web-dev-qa-db-ja.com

ko.applyBindingsを呼び出して部分ビューをバインドできますか？

私はKnockoutJSを使用しており、メインビューとビューモデルを持っています。ダイアログ（jQuery UIの1つ）を、別の子ビューモデルがバインドされる別のビューでポップアップするようにします。

ダイアログコンテンツのHTMLはAJAXを使用して取得されるため、リクエストが完了したらko.applyBindingsを呼び出すことができ、子ビューモデルをajaxを介して読み込まれたHTMLの一部のみにバインドします。ダイアログdiv内。

これは実際に可能ですか、またはページが最初にロードされたときにすべてのビューとビューモデルをロードしてからko.applyBindingsを1回呼び出す必要がありますか？

ajaxhtml5knockout.js
254
Charlie

ko.applyBindingsは、ルートとして使用するDOM要素である2番目のパラメーターを受け入れます。

これにより、次のようなことができます。

<div id="one">
  <input data-bind="value: name" />
</div>

<div id="two">
  <input data-bind="value: name" />
</div>

<script type="text/javascript">
  var viewModelA = {
     name: ko.observable("Bob")
  };

  var viewModelB = {
     name: ko.observable("Ted")
  };

  ko.applyBindings(viewModelA, document.getElementById("one"));
  ko.applyBindings(viewModelB, document.getElementById("two"));
</script>

そのため、この手法を使用して、viewModelをダイアログにロードする動的コンテンツにバインドできます。全体として、複数のイベントハンドラーがアタッチされるため、同じ要素に対してapplyBindingsを複数回呼び出さないように注意してください。

429
RP Niemeyer

Niemeyerの答えは質問に対するより正しい答えですが、あなたはcouldも次のことを行います。

<div>
  <input data-bind="value: VMA.name" />
</div>

<div>
  <input data-bind="value: VMB.name" />
</div>

<script type="text/javascript">
  var viewModels = {
     VMA: {name: ko.observable("Bob")},
     VMB: {name: ko.observable("Ted")}
  };

  ko.applyBindings(viewModels);
</script>

これは、DOM要素を指定する必要がなく、次のように複数のモデルを同じ要素にバインドできることを意味します。

<div>
  <input data-bind="value: VMA.name() + ' and ' + VMB.name()" />
</div>
60
mhu

実行時にカスタムモデルを要素にバインドできました。コードはこちら： http://jsfiddle.net/ZiglioNZ/tzD4T/457/

興味深い点は、定義していない要素にdata-bind属性を適用することです：

    var handle = slider.slider().find(".ui-slider-handle").first();
    $(handle).attr("data-bind", "tooltip: viewModel.value");
    ko.applyBindings(viewModel.value, $(handle)[0]);
6
ZiglioUK

withバインディングとcontrolsDescendantBindingsを確認する必要があります http://knockoutjs.com/documentation/custom-bindings-controlling-descendant-bindings.html

0
Sam Jacobs