Windows 8 HTML / JavaScript Metro 应用程序中的双向绑定

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

当我应用绑定时，用户界面会显示我的初始值。表单提交与计算功能正确连接。但是 value1 和 value2 的值不会随着用户输入而更新。

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

有没有什么方法可以用纯 WinJS 实现这一点？到目前为止，我发现的所有示例都只进行单向绑定，并使用事件侦听器通过 UI 的更改来更新 ViewModel。

Answer 1

WinJS 仅支持 Win8 的单向绑定。有必要为 UI 元素中的更改事件连接侦听器，这就是您所看到的示例的性质。换句话说，WinJS.Binding 的声明式处理的实现不定义也不处理任何类型的双向语法。

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

那么，当然，你会分享一段很棒的代码:)

Answer 2

这篇文章提供了一个很好的解决方案： http://www.expressionblend.com/articles/2012/11/04/two-way-binding-in-winjs/