Question

Not quite sure how to phrase this problem I have so I hope this makes sense.

I want to create a listview, and have set up all the data bindings and created a template etc, so it displays the data nicely, but one of the elements on each listview tile I show is a live ticking clock. The question really is how do I update all of the listview objects without redrawing the whole listview.

The only working method I have at the moment is to update the data bound to it every second, with the time I would like to display, which works, but it redraws the whole listview. Which is expensive, and triggers an animation (which can be canceled, but not completely listening to the animation start event)

Thanks!

Answer 1

One way would be to use a JavaScript template for your listview. Bind the data to your list view as normal but add a property to the data model called clock. For the data item you want to render a clock set it’s value to true. Rather than defining the template in HTML define the template in JavaScript (you can see how to do this here – http://msdn.microsoft.com/en-us/library/windows/apps/jj585523.aspx) In the JavaScript template you can then add some logic to determine if the tile should be a clock based on the bound property and if it is create the clock template:

function itemTemplateFunction(itemPromise) {

        return itemPromise.then(function (item) {

            if (item.data.clock == true) {
                //TODO: Append HTML and JS for your clock object
                //TODO: Perhaps set up a setInterval timer to tick your clock along.

            }
            else {
                //TODO Add the regular template Code, example below
                var div = document.createElement("div");

                var img = document.createElement("img");
                img.src = item.data.picture;
                img.alt = item.data.title;
                div.appendChild(img);

                var childDiv = document.createElement("div");

                var title = document.createElement("h4");
                title.innerText = item.data.title;
                childDiv.appendChild(title);

                var desc = document.createElement("h6");
                desc.innerText = item.data.text;
                childDiv.appendChild(desc);

                div.appendChild(childDiv);

                return div;

            }
        })
    };