windows-8 - Windows 8 HTML/JavaScript Metro 应用程序中的双向绑定(bind)

Question

我正在尝试在输入字段和 JavaScript ViewModel 中的字段之间实现双向绑定(bind)。绑定(bind)已以声明方式连接。不幸的是，我在 UI 中所做的更改并未反射(reflect)在我的 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);

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

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

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

Answer 1

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

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

然后，当然，您将有一段很棒的代码可以分享:)