4

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 でこれを達成する方法はありますか? これまでに見つけたすべてのサンプルは、一方向バインディングのみを行い、イベント リスナーを使用して、UI からの変更で ViewModel を更新します。

4

2 に答える 2

6

WinJS は、Win8 の一方向バインディングのみをサポートします。UI 要素の変更イベントのリスナーを接続する必要があるため、これまでに見たサンプルの性質です。つまり、WinJS.Binding の宣言型処理の実装では、双方向の構文は定義も処理もされません。

ただし、そのようなサポートを提供するために WinJS を自分で拡張することは可能です。WinJS.Binding は名前空間にすぎないため、WinJS.Namespace.define を使用して独自のメソッドを追加できます (これを繰り返し呼び出すと加算されます)。UI 要素と適用可能な変更イベント/プロパティを指定する独自の別の data-* 属性も検索する processAll のような関数を追加できます。その処理では、一般的なイベント ハンドラーを接続してバインディングを行います。WinJS ソースがあるので (Visual Studio の "参照" の下を見てください)、WinJS.Binding.processAll がモデルとしてどのように実装されているかがわかります。

そして、もちろん、共有する素晴らしいコードを手に入れることができます:)

于 2012-05-10T14:16:55.763 に答える
1

この記事は素晴らしい解決策を提供します: http://www.expressionblend.com/articles/2012/11/04/two-way-binding-in-winjs/

于 2013-03-28T03:57:50.310 に答える