Knockout binding on the anchor tag

Question

I have an anchor tag with an icon inside it like this:

<a>
    <i class="icon-flip-2"></i>
    hello
</a>

I would like to replace the hello text with an binded element. Something like:

<a data-bind="text: myValue">
    <i class="icon-flip-2"></i>
    hello
</a>

The problem is that I lost the element < i class="icon-flip-2">

I want to keep it and be able to bind something on the anchor tag.

Thanks.

Any idea?

Answer 1

Use a virtual element

<a>
    <i class="icon-flip-2"></i>
    <!-- ko text: myValue --><!-- /ko -->
</a>

or a <span>

<a>
    <i class="icon-flip-2"></i>
    <span data-bind="text: myValue, if: myValue().length > 0"></span>
</a>