WinJS Listview Datasource problem with keys and index

Question

Hi everyone,

I'm having a trouble with WinJS listview datasource. My datasource has uncontinued index as in the picture below. It's happened after binding an initial array to the datasource then adding new entry using insertAtEnd.

Can anyone explain this? Is there anyway to fix this problem?

Here's my code:

var list_control = document.getElementById("list_view").winControl;   

var list = new WinJS.Binding.List(init_array);
list_control.itemDataSource = list.dataSource;
list_control.itemTemplate = tileTemplate;
// some other code ...
for (var i = 0; i < other_array.length; i++) {
    list_control.insertAtEnd(null, other_array[i]);
}

Thanks in advance,

Shyaken.

Answer 1

It seems like you should be iterating through the indexes of your binding list, rather than the keys. Where is other_array being created, and how?

Answer 2

Hi shyaken,

Would you show us the code of the "insertAtEnd" function you used? Based on the winjs ListView control's reference, there is no "insertAtEnd" method on it.

#WinJS.UI.ListView object (Windows)
http://msdn.microsoft.com/en-us/library/windows/apps/xaml/br211837.aspx#methods

And for ListView control, if you want to add new items to the item collection be displayed in ListView control, you should directly manipulate the datasource list (WinJS.Binding.List object) directly. For example, you can use List.push method (just like standard javascript Array object) to insert a new object at the list end. And the change will be automatically updated to the ListView control (which is bound to the List).

#List.push method (Windows)
http://msdn.microsoft.com/en-us/library/windows/apps/hh700779.aspx

---

Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Answer 3

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

this insertAtEnd() function.

I showed you the code I used insertAtEnd() at the code I quoted before.

It's a function in the winControl of a listview

I tried to use push of WinJS.Binding.List object at you said but the same problem occurred. The listview control still have un-continued indices (missing an index in item datasource array).

Answer 4

Thanks for your quick reply shvaken,

I'm wondering if the behavior is specific to the particular data source object (the List you used here). Have you tried some simpler list constructed from a statically defined array (just like the SDK ListView sample or the default javascript code generated by Split App or Grid App project)? I've run a simple test through the ListView sample and try adding new items dynamically into the List (bound to the ListView) and when breaking in vs debugger, the List shows all items in sequence.

---

Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Answer 5

I have tried following the third scenario of this SDK ListView sample

And when breaking at addTile function, the data source showed to have the same problem. Can you tell me what sample that you used? I want to give it a try.

Answer 6

Hi shvaken,

I used the following sample:


#HTML ListView item templates sample
http://code.msdn.microsoft.com/windowsapps/ListView-item-templates-7d74826f

and add a button in the scenario 1 html page. In the button's click event handler, I just add a new item to the data source list (bound to the ListView) which is defined in data.js file. And I set breakpoint in the click event handler so as to watch the data source list variable.

---

Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Answer 7

I did everything as you said and the result is still unchanged:

this is the keys map after I added new tile to the list view

(I reduced the data list from 60 items to 10 items for easier observation)

By the way, I don't know why but I cannot upload anything using IE 10 with html5 (I think so) :( do you know about this problem

Answer 8

Hi shvaken,

After a double check based on your further explanation, I also found the same behavior. By using the sample I mentioend, after added 3 new items (to the 60 items list), the keys of the new added items are not adjacent with the existing items' keys. Since there is nothing else could changed the behavior, I think this should be due to the internal implementation of the WinJS.Binding.List type which doesn't guarantee the adjacency of items added into the List. Is your code rely on the adjacency of the generated keys of items in List? Generally, these keys are just used as a unique identifier for items in the list and should not affect the actual item object stored in the list. Also, you can use List.getAt() method to retrieve List item via their index number which is sequential and adjacent.

 

---

Please remember to mark the replies as answers if they help and unmark them if they provide no help.

Answer 9

Thank Steven.

I've changed my code to use List.getAt() and it works properly.