Knockout.js Шаблоны Foreach - принудительно завершить повторную визуализацию

Question

По умолчанию КО "будет отображать шаблон только для нового элемента и вставит его в существующий DOM".

Есть ли способ отключить эту функцию (например, заставить KO заново визуализировать все элементы)?

Answer 1

Если вы используете родной jQuery.tmpl {{each koObservableArray()}} синтаксис Knockout не может обновлять отдельные элементы, но должен повторно отображать весь шаблон

увидеть больше здесь: http://knockoutjs.com/documentation/template-binding.html

встроенная поддержка механизма "каждый" движка шаблонов: после любого изменения движок шаблонов вынужден перерисовывать все, потому что не знает механизм отслеживания зависимостей нокаутом.

Вы получаете поведение "по умолчанию", только если используете режим шаблона foreach, то есть:

<div data-bind='template: { name: "personTemplate", 
                            foreach: someObservableArrayOfPeople }'> </div>

Answer 2

Сегодня я столкнулся с подобной проблемой и смог решить ее для проблемы моей команды, заменив шаблон пользовательской привязкой, которая сначала очищает все данные КО и очищает контейнер перед рендерингом.

http://jsfiddle.net/igmcdowell/b7XQL/6/

Я использовал шаблон без контейнера следующим образом:

  <ul data-bind="alwaysRerenderForEach: { name: 'itemTmpl', foreach: items }"></ul>

и пользовательская привязка всегда RerenderForEach:

ko.bindingHandlers.alwaysRerenderForEach = {
  init: function(element, valueAccessor) {
    return ko.bindingHandlers.template.init(element, valueAccessor);
  },
  update: function(element, valueAccessor, allBindings, viewModel, context) {
    valueAccessor().foreach(); // touch the observable to register dependency
    ko.utils.domData.clear(element); // This will cause knockout to "forget" that it knew anything about the items involved in the binding.
    ko.utils.emptyDomNode(element); //Because knockout has no memory of this element, it won't know to clear out the old stuff.
    return ko.renderTemplateForEach(valueAccessor().name, valueAccessor().foreach, {}, element, context);
  }
};

Очевидно, что он немного запоздал как ответ на ваш запрос, но может помочь другим, кто выбрал это из поиска (как я сделал).