Windows 8 HTML/JavaScript Metro Apps中的双向绑定

Question

我正在尝试在JavaScript ViewModel中实现输入字段和字段之间的双向绑定.绑定已声明连接.不幸的是,我在UI中所做的更改并没有反映在我的ViewModel中.

我的代码看起来像那样(由于我这里没有代码而写在我脑海中)

视图:

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

当我应用绑定时,ui显示我的初始值.表单子目录与calculate函数正确连接.但是,值1和值2的值不会随用户输入更新.

我想要实现的是让我的JavaScript不知道底层视图.所以我不想为JavaScript中的html输入字段连接更改事件.

有没有办法用纯WinJS来实现这个目标？到目前为止,我发现的所有示例只进行单向绑定,并使用事件侦听器通过UI的更改来更新ViewModel.

Answer 1

WinJS仅支持Win8的单向绑定.有必要为UI元素中的更改事件连接侦听器,因此您看到的样本的性质.换句话说,WinJS.Binding的声明性处理的实现不定义也不处理任何类型的双向语法.

但是,有可能自己扩展WinJS以提供这样的支持.由于WinJS.Binding只是一个命名空间,您可以使用WinJS.Namespace.define向它添加自己的方法(对此重复调用是附加的).您可以添加一个类似processAll的函数,它还会查找您自己的另一个data-*属性,该属性指定了UI元素和适用的更改事件/属性.在处理它时,您将连接一个通用事件处理程序来进行绑定.由于您具有WinJS源(在Visual Studio中的"引用"下查看),您可以看到WinJS.Binding.processAll如何作为模型实现.

然后,当然,你有一个很棒的代码分享:)