locked
WinJS.Binding.Mixin not updating on button click

    Question

  • Good morning - not new to JS or HTML5, but relatively new to WinJS. I am hoping for some assistance on the following as I understand mixins are the best method for binding observable classes:

     So I have a simple class defined:

    var Movie = WinJS.Class.define(

            function (name, year) {

                this._initObservable();

                this.name = name;

                this.year = year;

            },

            { name: null, year: null });

    And a namespace:

        WinJS.Namespace.define("ViewModel", {

           

            Movie: WinJS.Class.mix(Movie,

                WinJS.Binding.mixin,

                WinJS.Binding.expandProperties(Movie))

            });

    I’m trying to use the Mixin.bind method

    WinJS.Utilities.ready(function () {

            document.getElementById("nextButton").onclick = function() {

                m.Name = "Back to the Future II";

                m.Year = "1988";

            }

            m.bind("name", function onNameChange(value) { document.getElementById("name").innerText = value; });

            m.bind("year", function onYearChange(value) { document.getElementById("year").innerText = value; });

        });

        var m = new ViewModel.Movie("Back to the Future", "1986");

     

    The initial values get set and my button click event is getting called from the button but my impression was that the UI would automatically update the values (that the binding would cause it to dynamically update the UI whenever a property changed). I’m missing some small piece.

    THANK YOU

    Thursday, February 14, 2013 4:24 PM

Answers

All replies

  • This is because two-way binding is not supported by WinJS sadly. This has been asked about a couple of times here, for instance: http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/15e81d99-89ea-4566-a643-bf243c8b1f18

    You could possibly try using knockout instead if you need two-way bindings, or you'll need to add event listeners for the change events on all your controls and update the values on your model manually.

    Thursday, February 14, 2013 4:40 PM
  • I appreciate the answer.

    Two-way binding is not supported by WinJS, yes.

    But one-way binding (versus one-TIME binding) is supported, right? So when object changes I should expect that the DOM would be updated. See: http://msdn.microsoft.com/en-us/library/windows/apps/hh700355.aspx. In this case the event doesn't seem to be raised.

     

     

    Thursday, February 14, 2013 10:46 PM
  • Ah, well I believe WinJS requires those one-way bindings to be Properties and not Fields on your bound object.

    Currently your Name and Year variables are fields. In order to be properties they need to have getters and setters. For more information, check out this awesome post which appears to still be accurate: http://www.progware.org/Blog/post/(Windows8)-WinJS-Basic-Javascript-Objects-and-the-ViewModel-pattern.aspx

    • Marked as answer by markcq Monday, February 18, 2013 2:02 PM
    Friday, February 15, 2013 2:59 PM
  • got.dibbs,

    Thanks for your answer.

    I did convert them to properties. Besides defining the getters and setters, I had to set "configurable" to true as well in order for WinJS.Binding.expandProperties to be fixed.

    So what is the real value here besides creating a DataBind(Movie) method which sets all of the fields and properties to their respective view values versus using this internal binding?


    • Edited by markcq Monday, February 18, 2013 2:06 PM
    Monday, February 18, 2013 2:05 PM