2

Knockout JSを使用して div にデータバインドしたい html マークアップのブロックがあります。これは、ノックアウトhtmlバインディングを使用すると簡単です。

私がやりたいのは、クラスに基づいて、その html マークアップ内の子要素を条件付きでバインドすることです。これらの要素はインライン要素 ( span、aタグなど) であるため、html マークアップ内の任意の場所に表示できます。

これの目的は、クリック イベントをこのテキスト ブロック内の特定の単語またはフレーズにデータバインドして、関数 (この場合は、ターゲットの単語またはフレーズの定義を含むモーダル) を呼び出せるようにすることです。

誰もこれを行う方法を知っていますか? 私が見る限り、探求すべき主な方法は 2 つあります。

  1. jQueryを使用してクラスごとに要素を取得し、何らかの形でデータバインドします。これがさまざまな理由で機能するかどうかはわかりません-DOMの準備ができていない、そのメソッドでデータバインドできないなど.

  2. ノックアウトのテンプレート バインディングafterRenderを使用し、要素のテキスト ブロックを解析し、それに応じてデータバインドするテンプレート コールバックを追加します。

  3. 上記の 2 つの組み合わせ。(ええ、私は知っています、それは 3 つの道です。)

誰かが前にこのようなことをしたことがありますか? できればアドバイスやご意見をいただきたいです。ありがとうございました！

4

1 に答える 1

3

バインド先の html が安全であることが確実でない限り、このアプローチはお勧めしません。html バインディングは次のようになります。

ko.bindingHandlers['html'] = {
    'init': function() {
        // Prevent binding on the dynamically-injected HTML 
        // (as developers are unlikely to expect that, and it 
        // has security implications)
        return { 'controlsDescendantBindings': true };
    },
    'update': function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        ko.utils.setHtml(element, value);
    }
};

これを見ると、html2バインディングを書くことができます

ko.bindingHandlers['html2'] = {
    'init': function() {
        return { 'controlsDescendantBindings': false };
    },
    'update': function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        ko.utils.setHtml(element, value);
    }
};

http://jsfiddle.net/madcapnmckay/LDtuF/1/

これには注意してください。安全でない目的で html を使用できないようにする必要があります。

お役に立てれば。

于 2012-06-06T16:43:05.573 に答える