5

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

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

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

4

3 に答える 3

10

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

<h2>
    <!-- ko text: firstName --><!-- /ko --> 
    <span data-bind="text: lastName"></span>
</h2>
于 2013-11-25T10:11:16.327 に答える
3

通常、このシナリオで適切に機能するように 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/

于 2012-04-26T13:44:40.283 に答える
3

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

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

<h2>
    <span data-bind="text:firstName"></span>
    <span data-bind="text:lastName "></span>
</h2>​
于 2012-04-26T10:00:14.533 に答える