7

これが私のhtmlを構築したい方法です

<a href="#">John <i class="person"></i></a>

そして、ノックアウト.jsを使用すると、これが私が行ったことです。

<a data-bind="text:name"><i class="person"></i></a>

推測できるように、アンカーの要素全体 (テキストだけでなく) がテキスト バインディングのために削除されます。この場合、アンカー内のタグ全体が削除されます。私の解決策は以下にあります。

<a data-bind="html: name() + '<i class="person"></i>'"></a>

data-bind での html との string concat は解決策ですが、2 つの大きな欠点があります。「name」プロパティは安全ではないため、html インジェクションを取得できます。data-bind 属性内に sedondly で html を書き込むのは最悪です。

もう一つの解決策は.

<a href="#"><span data-bind="text:name"></span><i class="person"></i></a>

ただの解決策として、新しい html マークアップを導入していることは知っています。それは私が見つけた最高のものです。

knockout.js のこの問題に対するよく知られた解決策は何ですか?

その中の要素全体ではなく、テキストだけを更新して、パラメーターを介してテキストバインディングに指定できますか?

またはより良い解決策？

4

2 に答える 2

10

スパンを使用することが推奨されるソリューションです。テキスト バインディングがすべてのコンテンツを置き換えない場合、何を更新すればよいかを判断するのが難しく、次に変更されたときに更新しません。要素の最初の子ノードを常に処理したい場合は、小さなカスタム バインディングを記述して支援することができます。

ここでは、単純なprependTextバインドを示します。これにより、バインディングを含む要素の最初の子ノードが常に置き換えられます。したがって、最初のノードが少なくともスペースであることを確認する必要があります。

ko.bindingHandlers.prependText = {
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        //replace the first child
        element.replaceChild(document.createTextNode(value), element.firstChild);
    }        
};

次のように使用します。

<a href="#" data-bind="prependText: name"> <span> another element</span></a>

サンプル: http://jsfiddle.net/rniemeyer/5CfzH/

于 2012-08-24T13:14:00.373 に答える