Updating Divs when observable collection changes

Question

Is there any plugin or jquery utility that will update my list of divs bound to an observable collection when items get added/removed to that collection? We have 1000s of items and so are looking for the most optimal way to add/remove divs when the bound list changes.

We would be interested in hearing about this in KO or jquery.tmpl.

Answer 1

This is maybe not the answer that your looking for, but it could be one way to do it. I would wrap the array within an object that has an Add and Remove method(or other function that change the array)

var Collection = (function () {
    var collectionArray = new Array();
    //"private" methods
    function updatePageDivs()
    {
        //Logic to update your Divs
    }
    //"public" methods
    return{
        Add: function(element){
            collectionArray[collectionArray.length] = element;
             updatePageDivs();
        },
        Remove: function(element){
            //other logic to remove elements and to trigger the updatePage
        }
    }

});

You can now call

Collection.Add()

and

Collection.Remove()

to change your javascript collection. Both will update your pagedivs.