0

ユーザーがテキストボックスを介して数値を入力するか、ドロップダウンからオプションを選択できるようにするUIを少し書き込もうとしています。

http://jsfiddle.net/unklefolk/PNQeR/2/で単純化された jsFiddle を作成しました。

ご覧のように：

  • 「The number」を選択すると、テキストボックスにテキストを入力できます。
  • 「オプション」を選択すると、ドロップダウンから 2 つのオプションのいずれかを選択できます。

テキストボックスとドロップダウンは両方ItemValueとも、 の item のプロパティにバインドされていますviewModel。コードは機能しているように見えますが、エラーが発生しています。Chrome でデバッグ ウィンドウを起動し、最初のドロップダウンを変更すると、次のエラーが表示されます。

キャッチされていない TypeError: オブジェクト 0 にはメソッド 'ItemName' がありません

これは、ItemTextdependentObservable (別名計算) で発生していると思います。

    this.ItemText = ko.dependentObservable(function () {
        return _isItemAConstant() === 'true' ? this.ItemValue() : this.ItemValue().ItemName();
    }, this);

明らかに、ItemName()関数が数値「0」で呼び出されており、エラーが発生しています。

このエラーが発生しないようにするにはどうすればよいですか? 2 つのコントロールを同じオブザーバブルにバインドする私の設計は根本的なエラーですか?

4

1 に答える 1

1

ItemName プロパティを持つオブジェクトにアイテムを設定する前に、_isItemAConstant を false に変更します。設定するとすぐに、dependentObservable が実行され、存在しない ItemName() オブザーバブルを評価しようとします。ItemName プロパティの存在を確認するか、スロットル エクステンダーを使用して、すべての変更が行われるまで計算を遅らせることができます。

this.ItemText = ko.dependentObservable(function () {
    return _isItemAConstant() === 'true' ? this.ItemValue() : this.ItemValue().ItemName();
}, this).extend( { throttle: 1} );

this.ItemText2 = ko.computed(function() {
    return this.ItemValue().ItemName ? this.ItemValue().ItemName() : this.ItemValue();
}, this);
于 2012-05-28T23:48:03.233 に答える