locked
What is the behavior for Listview to show items? RRS feed

  • Question

  • I bind  a data source to ListView. The data source is an item collection, and I push items into the collection one by one.

    But it seems like I finish the function then the ListView begin to draw.

    WinJS.xhr({ url: url }).done(function complete(result) {
       var links =JSON.parse(result.response);  
                    for (var i = 0; i < links.data.length; i++){
                        var newItem = 
                            { 
                                Name: links.data[i].title,
                                picture: links.data[i].picture,
                                Comment: links.data[i].owner_comment,
                                Source: links.data[i].url,
                                linkid: links.data[i].link_id
                            };
                        var ilength = itemCollection.push(newItem);
                       }
    }

     As I respect ListView draws when pushing an item.

    I use "forceLayout" but it 's not working.

    What is the timing for Listview to draw and how can I show an item as I push the item into the collection?

    Thursday, July 5, 2012 7:13 AM

Answers

  • Everything in a JavaScript app other than async operations and web workers run on the same UI thread. So while you're in a code loop adding items to a data source, the ListView will not be running at all to update itself. That can only happen when you return from the function and the UI thread gets to work on re-rendering/updating the ListView.

    To make something like this work you can do a couple of things. First, you can use a progress function (third parameter to WinJS.xhr.done) and process/add items at that time. Since the XHR operation is async, it's not blocking the UI thread...only your code in the progress handler will block it for a short time.

    Second, structure your loop to use msSetImmediate to process one item at a time. This way you'll yield to the UI thread with each iteration and you should see the ListView updating more iteratively. If you're not familiar with msSetImmediate, it just calls a function after yielding to the UI thread. You'll put your processing code in that function, and use some variables outside that function scope to keep track of the index. After doing one item, you call msSetImmediate again with the same function, except when you've processed the last item then you would not make such a call, of course.

    .Kraig

    • Proposed as answer by Dino He Friday, July 6, 2012 1:20 AM
    • Marked as answer by Daniel-Yang Friday, July 6, 2012 8:42 AM
    Thursday, July 5, 2012 5:04 PM

All replies

  • Everything in a JavaScript app other than async operations and web workers run on the same UI thread. So while you're in a code loop adding items to a data source, the ListView will not be running at all to update itself. That can only happen when you return from the function and the UI thread gets to work on re-rendering/updating the ListView.

    To make something like this work you can do a couple of things. First, you can use a progress function (third parameter to WinJS.xhr.done) and process/add items at that time. Since the XHR operation is async, it's not blocking the UI thread...only your code in the progress handler will block it for a short time.

    Second, structure your loop to use msSetImmediate to process one item at a time. This way you'll yield to the UI thread with each iteration and you should see the ListView updating more iteratively. If you're not familiar with msSetImmediate, it just calls a function after yielding to the UI thread. You'll put your processing code in that function, and use some variables outside that function scope to keep track of the index. After doing one item, you call msSetImmediate again with the same function, except when you've processed the last item then you would not make such a call, of course.

    .Kraig

    • Proposed as answer by Dino He Friday, July 6, 2012 1:20 AM
    • Marked as answer by Daniel-Yang Friday, July 6, 2012 8:42 AM
    Thursday, July 5, 2012 5:04 PM
  • is this possible to display selected list view items in other list view ...i am using javascript and HTML.......
    Thursday, April 25, 2013 12:21 PM
  • hi kraig,Is this possible to display selecte list items in other list view control as below...I am using javascript and HTML....Thanks in advancce
    Thursday, April 25, 2013 12:22 PM
  • Please post this as a new question in the forum. Typically adding another question to an older post like this won't get much visibility (or answers).
    Thursday, April 25, 2013 2:29 PM