locked
Getting a "JavaScript runtime error: Circular reference in value argument not supported" error when binding a ListView to a collection

    Question

  • Hi,
    I'm encountering this weird "JavaScript runtime error: Circular reference in value argument not supported" error when binding a ListView to a collection. This only happens when the number of items in my collection are more than 2. If I have just 2 items, it works perfectly fine.
     
    Here is my JavaScript code for binding:
    WinJS.UI.processAll().then(function () {
                WinJS.Binding.processAll();
                });
            var ds = WinJS.Binding.define({ City: "", Country: "" });
            var sourceObjects = [
            new ds({ Name: "New Delhi", Country: "India" }),
            new ds({ Name: "London", Country: "UK" }),
            new ds({ Name: "Beijing", Country: "China" })
            ];
    var DataSource = new WinJS.UI.ArrayDataSource(sourceObjects
            //, {
            //    keyOf: function (item) {
            //        return "_t" + item.Id;
            //        }
            //    }
            );
    
            WinJS.UI.getControl(id("listView1")).dataSource = DataSource;
            WinJS.UI.getControl(id("listView1")).refresh();
    

    If I modify the code so that there are only 2 elements in my sourceObjects array, everything works perfectly fine. 
    I'm getting this error in itemChanged(slot) function in uicollections.js file.
    What am I doing wrong?
    Any help would be highly appreciated.
    Thanks
    Gaurav 
    Thursday, January 5, 2012 4:11 PM

Answers

All replies

  • Could you problem be that you aren't using the correct identifiers?  What happens if you make this change?

        var ds = WinJS.Binding.define({ Name: "", Country: "" });


    Jeff Sanders (MSFT)
    Thursday, January 5, 2012 6:57 PM
    Moderator
  • Thanks Jeff for responding. Sorry for the typo earlier. I changed it per your suggestion but I'm still getting the same error. What surprises me is that this error kicks in only when I have more than 2 items. As long as there are 2 items, it works perfectly fine.

    Here is the revised code:

    WinJS.UI.processAll().then(function () {
                WinJS.Binding.processAll();
                });
            var ds = WinJS.Binding.define({ Name: "", Country: "" });
            var sourceObjects = [
            new ds({ Name: "New Delhi", Country: "India" }),
            new ds({ Name: "London", Country: "UK" }),
            new ds({ Name: "Beijing", Country: "China" })
            ];
    var DataSource = new WinJS.UI.ArrayDataSource(sourceObjects
            //, {
            //    keyOf: function (item) {
            //        return "_t" + item.Id;
            //        }
            //    }
            );
    
            WinJS.UI.getControl(id("listView1")).dataSource = DataSource;
            WinJS.UI.getControl(id("listView1")).refresh();
     
    

    Any ideas?

    Thanks

    Gaurav


    Friday, January 6, 2012 2:01 AM
  • Update:

    If I add "compareByIdentity: true" to my ArrayDataSource definition, the error goes away. So this modified code works:

     

    var DataSource = new WinJS.UI.ArrayDataSource(sourceObjects
            , {
                keyOf: function (item) {
                    return "_t" + item.Id;
                    }
                }, compareByIdentity: true,
            );
    
    

    Can somebody please explain me what this "compareByIdentity" is and how it works.
    Thanks
     
    Gaurav

     

    Friday, January 6, 2012 9:04 AM
  • Hi Gaurav,

    Sorry I just saw this.  This is documented here:

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

    compareByIdentity (type="Boolean"):    True  if the items in the array should be compared only by their identity, when detecting changes.

    That means you are comparing the object reference to see if it is the same object and not the value of the object.

    -Jeff


    Jeff Sanders (MSFT)

    Thursday, February 16, 2012 6:30 PM
    Moderator