Join the Stack Overflow Community
Stack Overflow is a community of 6.8 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

I've got a ListView that was using HTML-defined templates like this:

<div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
    <div>

        <!-- Displays the "picture" field. -->
        <img data-win-bind="alt: title; src: picture" />
        <div>

            <!-- Displays the "title" field. -->
            <h4 data-win-bind="innerText: title"></h4>

            <!-- Displays the "text" field. --> 
            <h6 data-win-bind="innerText: description"></h6>
        </div>
    </div>
</div>

<div id="basicListView" data-win-control="WinJS.UI.ListView" 
    data-win-options="{itemDataSource : DataExample.itemList.dataSource, itemTemplate: select('#mediumListIconTextTemplate')}">
</div>

When my list items changed, my item template would be updated to reflect the change. However, out of need, I had to change to using a javaScript function to build my template. I modeled my code after the code found on the sample site:

app.onactivated = function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {
        if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
            // TODO: This application has been newly launched. Initialize
            // your application here.
        } else {
            // TODO: This application has been reactivated from suspension.
            // Restore application state here.
        }
        args.setPromise(WinJS.UI.processAll().then(function () {
            var lView = document.getElementById("templateFunctionListView").winControl;
            lView.itemTemplate = itemTemplateFunction;

        }));

    }
};

function itemTemplateFunction(itemPromise) {

   return itemPromise.then(function (item) {
       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;
   });
};

After changing to the javascript function, my display items never change when my binding data changes.

What do I need to do to make them update?

share|improve this question
    
Can you post the code you're using to update the data? Also, have you set a breakpoint to verify whether or not your template code is called when you change the underlying data? – devhammer Mar 14 '13 at 1:37
    
My template code is NOT called after changing the data. That's what I need... how can I make it get called? – bugfixr Mar 14 '13 at 16:39
up vote 4 down vote

I think there are two approaches that could work for you.

In my case, when I refresh the data for my app, it's possible that one or more entities may be completely out of date, and there may be new entities to display. So I simply re-set the binding of the ListView, like so:

listView.itemDataSource = Data.items.dataSource;

where Data is the namespace I set up in data.js to contain all my data functions and objects.

When I update the value of the itemDataSource property, the ListView will re-bind to the new data, and display the correct items.

The other thing to look at, if your data is only being updated one property at a time, is using the WinJS.Binding.as function to make the items in the binding list observable, as described here:

http://msdn.microsoft.com/en-us/library/windows/apps/hh781224.aspx#updating_changing_records

If you haven't seen it already, there's some good info on databinding here:

http://msdn.microsoft.com/en-us/library/windows/apps/hh758311.aspx

And I found the following MSDN forum thread that may be helpful:

http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/21b9603f-e28d-4c93-b164-a2c91ba5c4ca

Hope the above helps!

For more information on Windows Store app development, register for App Builder.

share|improve this answer
up vote 0 down vote

Instead of rebinding the whole data set you can just rebind the single item. Find the items position in the list and then splice it replacing it with itself.

for (var i = 0; i < list.length; i++){
  item = list.getAt(i);
  if (item.key == itemToBeReBound.key){
    list.splice(i, 1, item);
    i = list.length;
  }
}
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.