Knockout.js Templates Foreach - force complete re-render

Question

By default, KO "will only render the template for the new item and will insert it into the existing DOM".

Is there a way to disable this feature (as in, force KO to render all items anew)?

Answer 1

I came across a similar problem today and was able to solve it for my team's issue by replacing the template with a custom binding that first clears all ko data and empties the container before rendering.

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

I used a containerless template like so:

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

and the custom binding alwaysRerenderForEach:

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);
  }
};

Obviously a little late as an answer to your query, but may help others who hit this off a search (as I did).

Answer 2

If you use jQuery.tmpl's native {{each koObservableArray()}} syntax Knockout cant update single items but must rerender the entire template

see more here: http://knockoutjs.com/documentation/template-binding.html

the template engine’s native ‘each’ support: after any change, the template engine is forced to re-render everything because it isn’t aware of KO’s dependency tracking mechanism.

You only get the "default" behavior if you use the foreach template mode, i.e.:

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