2

にバインドされたテキスト ボックスのリストがありますko.observableArray。

テキスト ボックスの値が空白にならないことを確認する必要があり、空白の場合は値を 0 に設定することで jQuery を使用します。blur()

問題は、jQuery で行われた値の変更がノックアウトによって登録されないことです。

モデルの値の変化を観察するにはどうすればよいですか?

ポイントを理解するには、私の簡略化されたフィドルを参照してください- http://jsfiddle.net/k45gd/1/

HTML

<input type="number" data-bind="value: age" />
<span data-bind="text: age"></span>
<button data-bind="click: setAgeExternally">I want the label to change to 0</button>

JS

var model = function() {
    this.age = ko.observable(21);

    //this code is outside of the model, this is oversimplification
    this.setAgeExternally = function(){
        $('input').val(0);
    }
};

ko.applyBindings(new model());
4

3 に答える 3

5

あなたが提供する例では、次のコードで入力ボックスを更新しています：

this.setAgeExternally = function(){
    $('input').val(0);
}

入力が age プロパティにバインドされていることを考慮すると、これを行う方が簡単です。

this.setAgeExternally = function(){
  this.age(0);
}

ただし、ビューモデルで age プロパティが公開されているため、実際には必要ありません。したがって、外部コードはこれを行うだけでよく、setAgeExternally メソッドは実際には必要ありません。

model.age(0);

元の問題に戻りましょう-あなたが説明しているがコードを投稿していない問題です。観測可能な配列にバインドされた入力ボックスのリストがあると述べています。

監視可能な配列を操作するときに知っておく必要がある興味深い落とし穴があります。

http://knockoutjs.com/documentation/observableArrays.htmlのドキュメントから:

キーポイント: observableArray は、オブジェクトの状態ではなく、配列内にあるオブジェクトを追跡します

オブジェクトを単に observableArray に入れるだけでは、そのオブジェクトのすべてのプロパティ自体が監視可能になるわけではありません。もちろん、必要に応じてこれらのプロパティを監視可能にすることもできますが、それは独立した選択です。observableArray は保持しているオブジェクトを追跡し、オブジェクトが追加または削除されたときにリスナーに通知します。

リストした要件を考えると、jQuery はまったく必要ありません。この 3 部構成のソリューションを試すことができます。

  1. observableArray にオブザーバブルを含めます。したがって、次のような結果になります。

    var model = function() {
  this.ages = ko.observableArray([
    {age: ko.observable(13)},
    {age: ko.observable(18)},
    {age: ko.observable(16)},
    {age: ko.observable(13)}
  ]);
};

  2. 次に、空白の場合に自動的に 0 にリセットされるノックアウト エクステンダーを作成します。

    ko.extenders.defaultIfBlank = function(target, defaultValue) {
  var result = ko.computed({
    read: target,  //always return the original observables value
    write: function(newValue) {
        if (newValue == "") {
          target(defaultValue);
        } else {
           target(newValue);
        }
    }
  });

  //initialize with current value to make sure it is not blank
  result(target());

  //return the new computed observable
  return result;
};

  3. 配列内のオブザーバブルにエクステンダーを適用します

    var model = function() {
  this.ages = ko.observableArray([
    ko.observable(13).extend({defaultIfBlank: "0"}),
    ko.observable(18).extend({defaultIfBlank: "0"}),
    ko.observable(16).extend({defaultIfBlank: "0"}),
    ko.observable(13).extend({defaultIfBlank: "0"})
  ]);
};

作業フィドル: http://jsfiddle.net/tlarson/GF3Xe/

于 2013-04-08T05:11:39.280 に答える