Knockout interception on anchor label

Question

I have an anchor tag with an icon inside it as follows:

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

I would like to replace the welcome text with a related 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 save it and be able to bind something to the anchor tag.

Thanks.

Any idea?

Answer 1

Use virtual item

 <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> 

Answer 2

Place the text inside the span inside the tag and bind its span text property.

Answer 3

I will be tempted to place text between:

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