How to set key property for a binding list?

Question

The documentation for WinJS.Binding.List  states that it can be accessed by a string key.  It has the getItemFromKey method listed.  How do I set the key property for the list.

I have an array of objects and like to set one property as key.

eg:

var array = [{userid: "abcd", value: 100}, ... ];

var list = new WinJS.Binding.List(array);

How to specify userid property as the key for list so that I could use list.getItemFromKey("abcd")

Answer 1

When you create a list that way, the key that you get associated with the list is in the integer, not a string. If you look at the implementation of base.js, you will notice how the list gets created.

---

Windows Store Developer Solutions, follow us on Twitter: @WSDevSol|| Want more solutions? See our blog

Answer 2

Is there a way to create a list to set userid property as key? 

Looks like the array index is just converted to string and stored as key.

Answer 3

I think this is what you want:

    var array = [{ userid: "abcd", value: 100 }, {userid: "defg", value: 200}];

    var list = new WinJS.Binding.List();

    array.forEach(function (item) {
        list.push({
            group: "group 1", key: item.userid,
            value: item.value
        });
    });

Answer 4

Sorry that doesn't work,

I couldn't use list.getItemFromKey("abcd")

It the list still uses index as the key.

Answer 5

To use getItemFromKey with a non-index value, you might look here:

http://stackoverflow.com/questions/15169135/winjs-binding-list-key-value-isnt-found

I can use the above code to get an item reference by adding a new implementation of resolveItemReference() to check for my userid, which effectively becomes the key.

    // Same code as above.

    var array = [{ userid: "abcd", value: 100 }, {userid: "defg", value: 200}];

    var list = new WinJS.Binding.List();

    array.forEach(function (item) {
        list.push({
            group: "group 1", key: item.userid,
            value: item.value
        });
    });

    // Also requires some template code, like this. See data.js in the templates.

    var groupedItems = list.createGrouped(
        function groupKeySelector(item) { return item.group.key; },
        function groupDataSelector(item) { return item.group; }
    );

    // New code

    var item = resolveKeyReference("abcd"); 

    // New implementation of resolveItemReference, from template code.
    function resolveKeyReference(itemKey) {
        for (var i = 0; i < groupedItems.length; i++) {
            var item = groupedItems.getAt(i);
            if (item.key === itemKey) {
                return item;
            }
        }
    }