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

我试图在JavaScript视图模型中实现输入字段和字段之间的双向绑定。绑定已以声明方式连接。不幸的是，我在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>

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

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

---

有没有办法用纯WinJS实现这一点？到目前为止，我发现的所有示例都只执行单向绑定，并使用事件侦听器使用UI中的更改更新ViewModel。

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

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

---

当然，您还可以分享一段很棒的代码：）

本文提供了一个很好的解决方案：

---

感谢您的澄清！如果我要实现这个功能，我肯定会分享它；-）我的博客上有这样一个例子：

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