locked
Exception while binding object in metro app

    Question

  • default.html

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>ObjectBinding</title>

        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
        <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
        <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>

        <!-- ObjectBinding references -->
        <link href="/css/default.css" rel="stylesheet">
        <script src="/js/default.js"></script>
    </head>
    <body>
         <div id="objectBinding">
          Welcome
          <span id="bindableSpan"></span>
        </div>
        <script type="text/javascript">
            var Person = WinJS.Class.define(
            function() {
                this.name = "Harry";
                this.color = "blue";
                this.timeout = null;
            }, {

                color: "red",

                name: "ravi",

                _nameArray:
                new Array("Sally", "Jack", "Hal", "Heather", "Fred", "Paula", "Rick", "Megan", "Ann", "Sam"),
                _colorArray:
                new Array("lime", "lavender", "yellow", "orange", "pink", "greenyellow", "white", "lightblue", "lightgreen", "lightyellow"),

                _newName: function () {
                    console.log(this.getProperty("name"));
                    this.setProperty("color", this._colorArray[this._randomizeValue()]);
                    this.setProperty("name", this._nameArray[this._randomizeValue()]);
                },
                _randomizeValue: function () {
                    var value = Math.floor((Math.random() * 1000) % 8);
                    if (value < 0)
                        value = 0;
                    else if (value > 9)
                        value = 9;
                    return value;
                },
                start: function () {
                    var that = this;
                    if (this.timeout === null) {
                        this.timeout = setInterval(function () { that._newName(); }, 500);
                    }
                }, 

                snbsp;               if (this.timeout !== null) {
                        clearInterval(this.timeout);
                        this.timeout = null;
                    }
                }
            });

            WinJS.Class.mix(Person, WinJS.Binding.mixin, WinJS.Binding.expandProperties(Person));

            myPerson = new Person();

            myPerson.bind("name", function onNameChange (newValue) {
                var span = document.getElementById("bindableSpan");
                span.innerText = newValue;
            });

            myPerson.bind("color", function onColorChange (newValue) {
                var span = document.getElementById("bindableSpan");
                span.style.color = newValue;
            });

            myPerson._newName();
    </script>
    </body>
    </html>

    When i execute the above code, i receive the following exception:

    Unhandled exception at line 6483, column 13 in ms-appx://microsoft.winjs.0.6.debug-8wekyb3d8bbwe/js/base.js

    0x800a138f - JavaScript runtime error: Unable to get value of the property 'name': object is null or undefined
    Monday, May 28, 2012 4:20 PM

Answers

  • Hi,

    Regards to the document on http://msdn.microsoft.com/en-us/library/windows/apps/hh700355.aspx, it seems the code doesn't work correctly. But here’s a workaround:

    First, please define properties instead of fields. For example:

                 _name: "",
                 name: {
                     get: function () {
                         return this._name;
                     },
                     set: function (value) {
                         this._name = value;
                         this.notify("name", value);
                     }
                 },

    In addition, please do not invoke setProperty manually. You can call:

    this.name = something;

    As long as you’ve defined the properties and invoked this.notify in the setter, the binding engine will automatically update UI.

    Hope someone from the document team can clarify whether the code on the document is correct.

    Best Regards,

    Ming Xu.


    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com.
    Microsoft One Code Framework

    Tuesday, May 29, 2012 8:23 AM
    Moderator