Optimizing Knockout.js

Today I have been working on a project that requires updates on hundreds of DOM elements when a view of my HTML5 mobile app is loaded.

In any other project, with only 10 or 20 elements to update, I write something like this:

element = document.getElementById("myDOMelement");

app.models.applyBindings(
    { 
        myData: myData
    },
    element
); 

But using this code, when there are hundreds of bindings, is very painful for the performance of the application.

A good alternative is query a limited collection of elements to update, and only when necessary (ex: when the hidden elements shows up), do the rest of the update.

First, you bind a filtered elements collection:

elements = document.querySelectorAll("#myDOMelement > .myField > [data-bind]");

for (i = 0; i < elements.length; i++) {
    app.models.applyBindings(
        { 
            myData: myData
        },
        elements[i]
    ); 
}

And then, for example when the user clicks a button that show the rest of the fields, you can bind the rest:

elements = document.querySelectorAll("#myDOMelement > .myHiddenField > [data-bind]");

for (i = 0; i < elements.length; i++) {
    app.models.applyBindings(
        { 
            myData: myData
        },
        elements[i]
    ); 
}

Using this approach, you can bind only the exact elements you need to bind, achieving a good performance optimization.