1

UI にノックアウトを使用しているページのセクションがあり、そのセクションで ApplyBindings を呼び出します。

HTML

<div id="example">
    <p data-bind="text: message"/>
    <i class="icon-information" title="some tooltip here"/>
</div>

JS

var model = createModel();
ko.applyBindings(model, $("#example")[0]);

iまた、Knockout を内部で使用するウィジェットを作成し、タグに接続して素敵なツールチップを取得したいと考えています。問題は、applyBindings が基本的にiタグで 2 回呼び出されるため、エラーが発生することです。不自然な例では、バインディングがある場所からタグを移動するだけでよいことを理解してiいますが、実際のコードではこれは単純ではありません。

私の質問は、人々はこの種の状況にどのように対処していますか? 最も簡単な答えは、Knockout を使用しないようにウィジェットを変更することですが、それは面倒で、多くの余分なコードが必要です。

上記のデモ コードだけに注目しないでください。これはより理論的な例です。実際の例を使用しようとすると、説明が多すぎます。

4

2 に答える 2

2

ウィジェットの性質に応じて、いくつかのオプションを追求できると思います。

1 つ目は、「データ バインド」属性を追加してウィジェットからko.applyBindingsToNode呼び出すのではなく、APIを使用することです。ko.applyBindings

次のように呼び出します。

ko.applyBindingsToNode(element, { someBindings: val, anotherBinding: val2 });

また、制御フローのシナリオで使用されるデータ コンテキストを渡す 3 番目の引数も受け入れます。

この API を使用して別のオブザーバブルをバインドko.applyBindingsし、「通常の」ビュー モデルで呼び出すサンプルを次に示します: http://jsfiddle.net/rniemeyer/QBMSB/。この方法で競合するバインディングを追加することは確かに可能です (異なる値に対する同じバインディングの 2 つ)。

「テンプレート」(HTML の束) を挿入するようなことを行っていて、各要素を呼び出すのが必ずしも便利ではない場合は、ここでko.applyBindingsToNode説明する手法を使用して、バインディングが子に適用されないようにすることができます。

したがって、次のような単純なバインディングがあります。

ko.bindingHandlers.stopBinding = {
    init: function() {
        return { controlsDescendantBindings: true };
    }
};

次に、ウィジェットは、このバインディングを含むラッパー要素を挿入します。次に、子に対して applyBindings を呼び出すことができ、「通常の」 applyBindings 呼び出しが干渉することを心配する必要はありません。

ウィジェット マークアップを直接入力したサンプルを次に示します: http://jsfiddle.net/rniemeyer/Tf79p/。私の推測では、ウィジェットが呼び出されると、このようなマークアップが追加されると思います。

于 2013-06-01T01:39:56.973 に答える
0

Re: 上記のコメント、それはウィジェットを持つことのポイントを無効にしません。

ツールチップ ウィジェットとモデル/ビューモデルの間のアダプターとしてカスタム バインディングを作成します (ツールチップの実行方法、または使用しているツールチップ ウィジェットによって異なります)。私は jQuery ツールのツールチップ ( http://jquerytools.org/documentation/tooltip/index.html ) をこのように使用しています。単純なカスタム バインディング ハンドラーを作成するだけで済みました。

ko.bindingHandlers.jqTooltip = {
  init: function (element, valueAccessor) {
     var options = valueAccessor() || {};
     $(element).tooltip();
  }
}

次に、バインディングで：

data-bind="jqTooltip:{}"

または、オブジェクトに必要なオプションを渡し、それらのオプションを適切に取り込むようにカスタムハンドラーを調整します（上記ではそうしませんでした）。

これは別のビューモデルを取るべきではありません。また、ビューモデルに多数のモデルを含めることができることに注意してください。jqDialog、jqButton などを使用した Ryan Niemeyer の例 (google it) を参照してください。再利用するには、別のモデルとして適切に名前空間を設定し、必要に応じてインスタンス化してください。

于 2013-05-31T22:08:37.117 に答える