我正在尝试在我的 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。