Можете ли вы вызвать ko.applyBindings, чтобы связать частичное представление? - PullRequest
Новая
       22

Можете ли вы вызвать ko.applyBindings, чтобы связать частичное представление?

254 голосов
/ 08 сентября 2011

Я использую KnockoutJS и имею основной вид и вид модели. Я хочу, чтобы диалог (пользовательский интерфейс jQuery) всплывал с другим представлением, к которому должна быть привязана отдельная модель дочернего представления.

HTML-код для содержимого диалога извлекается с использованием AJAX, поэтому я хочу иметь возможность вызывать ko.applyBindings после завершения запроса, и я хочу привязать модель дочернего представления только к той части HTML, загруженной через ajax внутри диалоговое окно div.

Возможно ли это на самом деле, или мне нужно загрузить ВСЕ мои представления и модели просмотра при первоначальной загрузке страницы, а затем один раз вызвать ko.applyBindings?

Ответы [ 4 ]

430 голосов
/ 08 сентября 2011

ko.applyBindings принимает второй параметр, который является элементом DOM для использования в качестве корня.

Это позволит вам сделать что-то вроде: 

<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 несколько раз для одних и тех же элементов, поскольку вы получите несколько обработчиков событий.

60 голосов
/ 29 февраля 2012

Хотя ответ Нимейера является более правильным ответом на вопрос, вы могли бы также сделать следующее: 

<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>
6 голосов
/ 21 февраля 2012

Мне удалось связать пользовательскую модель с элементом во время выполнения.Код здесь: http://jsfiddle.net/ZiglioNZ/tzD4T/457/

Интересным моментом является то, что я применяю атрибут привязки данных к элементу, который я не определил: 

    var handle = slider.slider().find(".ui-slider-handle").first();
    $(handle).attr("data-bind", "tooltip: viewModel.value");
    ko.applyBindings(viewModel.value, $(handle)[0]);
0 голосов
/ 29 октября 2013

Вы должны посмотреть на with привязку, а также controlsDescendantBindings http://knockoutjs.com/documentation/custom-bindings-controlling-descendant-bindings.html

...