Update on observable array foreach removes formatting knockoutjs

Question

Updating an observable array that is linked to a foreach will redraw all the DOM elements the forEach generates. Without tying observable elements to properties of the objects in the array, is there a way to avoid the complete redraw of the DOM?

I obviously want the particular elements redrawn that are updated, but if I have a hidden/visible element it will reset it to the default (if it's a JS onclick styled piece).

http://jsfiddle.net/OrganicCat/CjH87/6/

var SimpleListModel = function(items) {
    this.items = ko.observableArray(items);
    this.itemToAdd = ko.observable("");

    this.openItem = function(data, event) {
        $(event.target).next().toggle();
    };
    this.modifyList = function() {
        var modifiedList = ["Cats", "Dogs", "Hedgehogs"];
        this.items(modifiedList);
    };
};

ko.applyBindings(new SimpleListModel(["Alpha", "Beta", "Gamma"]));

Answer 1

You may want to look at your architecture a bit.

MVVM means your entire view should be bound to your viewModel. So all elements are controlled by the view model.

If you try and do a half and half approach then you'll find yourself fighting the MVVM pattern. If you need to control the visibility of elements that are part of a foreach you need to control visibility from your observable array.

Hope that helps.