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

當我應用綁定時，ui顯示我的初始值。表單子命令與計算功能正確連接。但是value1和value2的值不會隨用戶輸入而更新。

我試圖實現的是讓我的JavaScript不知道底層視圖。所以我不想爲JavaScript中的html輸入字段連接更改事件。

有沒有什麼辦法可以用純WinJS來實現這個？到目前爲止，我發現的所有示例都只進行單向綁定，並使用事件偵聽器來更新ViewModel，並使用UI進行更改。

Answer 1

WinJS只支持Win8的單向綁定。有必要爲UI元素中的更改事件連接監聽器，因此您已經看到了這些示例的性質。換句話說，WinJS.Binding的聲明式處理的實現沒有定義或處理任何類型的雙向語法。

然而，可能自己擴展WinJS來提供這種支持。由於WinJS.Binding只是一個命名空間，所以你可以使用WinJS.Namespace.define添加你自己的方法（重複調用這個方法是可加的）。您可以添加一個像processAll這樣的函數，它還會查找您自己指定UI元素和適用的更改事件/屬性的另一個data- *屬性。在處理這個過程中，你會連接一個通用的事件處理程序來執行綁定。由於您擁有WinJS源代碼（查看Visual Studio中的「參考」），您可以看到WinJS.Binding.processAll是如何作爲模型實現的。

然後，當然，你就會有一個很大的一段代碼共享:)

Answer 2

本文提供了一個很好的解決方案： http://www.expressionblend.com/articles/2012/11/04/two-way-binding-in-winjs/