Knockout.js: множественные привязки ViewModel на странице или части страницы

Мне интересно, можно ли несколько раз использовать Knockout.js ko.applyBindings() для привязки разных ViewModels к одной части страницы. Например, скажем, у меня было это:

<div id="foo">...</div>
...
ko.applyBindings(new PageViewModel());
ko.applyBindings(new PartialViewModel(), $('#foo')[0]);

Теперь я применяю два привязки ViewModel к <div id="foo>. Является ли это законным?

Ответы

Ответ 1

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

Существует несколько вариантов обработки этого типа вещей, которые подробно описаны здесь: Пример шаблона knockoutjs для приложений с несколькими просмотрами

Если вам действительно нужен "остров" в середине вашего контента, который вы хотите называть позже, используйте метод, описанный здесь: http://www.knockmeout.net/2012/05/quick-tip-skip-binding.html

Ответ 2

Это общий дорожный блок, который появляется при реализации JqueryMobile-SPA. Метод: ko.applyBindings(viewmode, root dom element) принимает два аргумента. Второй аргумент полезен, если на вашей странице несколько VM.

например:

ko.applyBindings(model1, document.getElementById("view1")); 
ko.applyBindings(model2, document.getElementById("view2"));

где view1 и view2 являются корневым элементом dom для этой модели. Для JQueryMobile-SPA это будут идентификаторы страниц для соответствующей модели.

Ответ 3

Лучший способ сделать это - использовать конструкцию привязки "с" в div, которую вы хотите привязать к модели частичного просмотра. Вы можете найти его в этом fiddle

<div data-bind="with: model">
   <p data-bind="text: name"></p>
</div>

<div data-bind="with: anothermodel">
   <p data-bind="text: name"></p>
</div>​

var model = {
   name: ko.observable('somename'),
}

var anothermodel = {
    name: ko.observable('someanothername'),
}
ko.applyBindings(model);​

Также проверьте "с" документацией по привязке на сайте Knockout, чтобы посмотреть сценарий обратного вызова AJAX - частичный привязку.

Ответ 4

Мой английский очень плохой.... =)

Я использую Sammy для загрузки частичных представлений, а Knockout для привязки модели, я пытаюсь использовать ko.cleanNode, но очистить все мои привязки, все узлы DOM изменились, когда имеет привязку, свойство __ko__ агрегировано, тогда я удалил это свойство с помощью этого кода и работает!!, '#main' - это мой node.

var dom = dom || $("#main")[0];
for (var i in dom) {
  if (i.substr(0, 6) == "__ko__") {
     delete (dom[i]);
     break;
  }
}

после использования переводчика Ggle:

Я использую Sammy для загрузки частичных представлений, а Knockout для привязки модели, я пытаюсь использовать ko.cleanNode, но очищать все мои привязки, все узлы DOM изменились, когда у них есть привязка, свойство ko, тогда я удалил это свойство с помощью этого кода и работает!!, '#main' - это мой node.