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

244

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

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

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

Теги:
knockout.js

4 ответа

441
Лучший ответ

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

Поделиться
  • 17
    Если вы также хотите удалить привязки в какой-то момент в будущем, вы можете вызвать либо ko.cleanNode(document.getElementById("one") для очистки, либо ko.removeNode(document.getElementById("one") для очистки) и удалите узел из DOM.
  • 7
    Просто обратите внимание, что cleanNode и removeNode не будут удалять обработчики событий, поэтому будьте осторожны. В некоторых случаях предпочтительно использовать template или with привязкой к этим областям, поэтому у вас есть новые элементы визуализации.
Показать ещё 7 комментариев
60

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

<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>
Поделиться
  • 4
    Вы также можете использовать «с» для выделения областей страницы отдельным моделям - data-bind = "with: VMA"
  • 3
    @ Flamingpenguin: Да, но with дешевым, смотрите: ссылка
6

Мне удалось привязать пользовательскую модель к элементу во время выполнения. Код здесь: 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
    возникли проблемы с Ko 2.3, приведенный выше код находится в обработчике клиента, который вызывается, когда я применяю глобальный ko.applyBindings (). Так что теперь я получаю ошибку «Вы не можете применять привязки несколько раз к одному и тому же элементу». Я все еще пытаюсь понять, почему я получаю ошибку. Разве мы не можем применить привязку к одной и той же переменной несколько раз, каждый к разным элементам?
  • 0
    Вот версия с 2.3, которая не работает: jsfiddle.net/ZiglioNZ/tzD4T/458
Показать ещё 4 комментария
0

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

Поделиться
  • 0
    это выглядит сложно. Ko 3.0 будет проще?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню