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);
                    }
                }, 

                stop: function () {
                    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

                                           
    Saturday, May 19, 2012 12:58 PM

All replies

  • Hi ravipiplani,

    Thank you for posting in the MSDN forum.

    Based on your description, I’m afraid that it is not the correct forum, since this forum is to discuss the VS Debugger tool.

    Since this issue is related to the Metro style apps, you could select the correct forum “Windows Metro style apps” for dedicated support. Thanks for your understanding.

    Best Regards,


    Jack Zhai [MSFT]
    MSDN Community Support | Feedback to us

    Monday, May 21, 2012 9:11 AM