knockout.js - データ バインディングのネストされた html 要素をノックアウトする

Question

モデル値へのデータ バインド テキスト プロパティを持つ h2 タグがあり、内部には、モデル値へのデータ バインド テキスト プロパティでもある span タグがあります。

しかし、モデルがバインドされているときにスパンが置き換えられます.htmlを追加する方法はありますか.

http://jsfiddle.net/WKnWr/1/

Answer 1

最新のノックアウトでは、John Earles のソリューションと同様に、h2 テキストに仮想要素を使用できますが、姓と名を別々にスタイルできることを意味します

<h2>
    <!-- ko text: firstName --><!-- /ko --> 
    <span data-bind="text: lastName"></span>
</h2>

Answer 2

通常、このシナリオで適切に機能するように HTML を変更する必要があります。ただし、それが不可能な場合は、スパンを挿入するカスタム バインディングを使用できます。

次のようになります。

ko.bindingHandlers.insertText = {
    init: function(element, valueAccessor) {
        var span = document.createElement("span"),
            firstChild = element.firstChild;

        element.insertBefore(span, firstChild);
        ko.applyBindingsToNode(span, { text: valueAccessor() });       
    }       
};

サンプル: http://jsfiddle.net/rniemeyer/fLmXu/

Answer 3

「テキスト」バインディングがその要素のinnerText（またはtextContent）を設定するため、現在のコードは上書きされます。そのため、h2テキストバインディングは既存の埋め込みhtml（スパンなど）を上書きします。

あなたはこれを行うことができます：

<h2>
    <span data-bind="text:firstName"></span>
    <span data-bind="text:lastName "></span>
</h2>​