0

オブザーバブルの作成をカスタムバインディング内にカプセル化しようとしています。これは、knockoutjs-validationのisValidによく似ていますが、このプロパティは将来、複雑な一連のイベントを記録する別のバインディングの結果になるため、バインディングを拡張しません。入力すると、これにカスタムバインディングを使用する以上のことをすべきではないように感じます。

次のコードは、オブザーバブルの作成を担当するカスタムバインディングを示しています。

ko.bindingHandlers.myBinding = {
  init: function (
  element, valueAccessor, allBindingsAccessor,
  viewModel, bindingContext) {
    console.log("init myBinding");

    var observable = valueAccessor();
    observable.IsRed = ko.observable(true);
    console.log("isred created");

    ko.applyBindingsToNode(element, {
      value: observable,
      mySubBinding: observable.IsRed
    }, viewModel);
    console.log("finish myBinding");
  },
  update: function (
  element, valueAccessor, allBindingsAccessor,
  viewModel, bindingContext) {
    console.log("update myBinding");
  }
};

私が抱えている問題は、applyBindingsコマンドの一部が実行された後にオブザーバブルが作成されたように見え、ビューの後方バインディングのみがオブザーバブルの正しい値を確認できることです。

動作を示すためにjsfiddleを作成しました。その中で、IsRed問題のオブザーバブルです。

http://jsfiddle.net/ricardomp/c2HnJ/15/

期待される結果は、同じ値の前後の赤い背景とスパンタグの入力になります。

その結果を達成するために私は何ができますか？結果のバインディングは、外部のオブザーバブルやプロパティに依存するべきではありませんよね？別の実装を提案しますか？

前もって感謝します。

アップデート：

myBindingは、複数のバインディングをカプセル化するバインディングであることに言及する価値があると思います。したがって、IsRedのように、同様のオブザーバブルに3つまたは4つのバインディングが割り当てられます。

最終更新：

RPの回答の後、オブザーバブルの初期化を実行するために次のコードを記述しました。

ko.observable.fn.colorStatus = function () {
    this.isRed = ko.observable();
    this.isGreen = ko.observable();
    this.isBlue = ko.observable();

    this.ResetStatus = (function () {
        this.isRed (undefined);
        this.isGreen (undefined);
        this.isBlue (undefined);
    }).bind(this);
    return this;
};

その後、初期化中にobservableでcolorStatusを呼び出すだけで済みました。

self.value = ko.observable().colorStatus();

そしてそれがすべてです。

4

1 に答える 1

0

問題は、バインディング文字列が jsFiddle の例の最初の 2 つのバインディングに対して評価されるとき$root.Test.IsRedですundefined。

したがって、これは binding と同等ですtext: undefined。まだ観測可能ではないため、依存関係は作成されず、バインディングは更新されません。

IsRedバインディング文字列で使用する前に、 が作成されていることを確認する必要があります。拡張機能 (エクステンダーまたは基本タイプの拡張) を使用して、ビュー モデル自体でこれを行うことができます。それ以外の場合は、前の要素にそれを追加するバインディングを追加できます。

重要な部分は、IsRedそれを含むバインディング文字列が解析される前に存在することです。

于 2013-01-09T03:14:13.340 に答える