Question

I’m trying to achieve a two way binding between an input field and a field in my JavaScript ViewModel. The binding has been wired up declarativly. Unfortunately the changes I do in the UI aren’t reflected in my ViewModel.

My Code looks like that (written out of my head as I don’t have the code here)

View:

<form data-win-bind="onsubmit: onCalculate">

<div class="field">
    Product Name:
    <input type ="number" data-win-bind="text:value1"/>
</div>
<div class="field">
    Product Price:
    <input type ="number" data-win-bind="text:value2"/>
</div>
<div class="field">
    Result
    <br />
    <span data-win-bind="innerText: result" />
</div>
</form>

JavaScript

var model= WinJS.Class.define(
function() {
          this.onCalculate = calculate.bind(this);
          this.value1 = 0;
          this.value2 = 0;
          this.result = 0; 
          },{
            value1: 0,
            value2: 0,
            result: 0
            calculate: function() {
                this.result = this.value1 + this.value2;
                return false;
            }
        }, {});
// Make the model Observable
var viewModel = WinJS.Binding.as(new model());

WinJS.Binding.processAll(null, viewModel);

When I apply the binding, the ui shows my initial values. The form submition is correctly wired with the calculate function. The values of value1 and value2 however aren’t updated with the users input.

What I’m trying to achive is to keep my JavaScript unaware of the underlying view. So I don’t want to wire up change events for the html input fields in JavaScript.

Is there any way to achive this with pure WinJS? All samples I’ve found so far only do a one-way binding and use event listeners to update the ViewModel with changes from the UI.

Answer 1

WinJS only supports one-way binding for Win8. It is necessary to wire up listeners for change events in the UI elements, hence the nature of the samples you’ve seen. In other words, the implementation of WinJS.Binding’s declarative processing doesn’t define nor handle any kind of two-way syntax.

It would be possible, however, to extend WinJS yourself to provide such support. Since WinJS.Binding is just a namespace, you can add your own methods to it using WinJS.Namespace.define (repeated calls to this are additive). You could add a function like processAll which would also look for another data-* attribute of your own that specified the UI element and the applicable change events/properties. In processing of that you would wire up a generic event handler to do the binding. Since you have the WinJS sources (look under “References” in Visual Studio), you can see how WinJS.Binding.processAll is implemented as a model.

Then, of course, you’d have a great piece of code to share 🙂