Prevent knockout from replacing nested element

Question

Is there a way to prevent the content in the span tag from being replaced, after the anchor tag binding takes places?

<ul data-bind:"foreach: items">
<li>
<a data-bind="text: name"><span data-bind="text: items().length()"></span></a>
</li>
</ul>

Answer 1

Here's a JSFiddle, I'd suggest doing this or placing the name in another span

<ul data-bind="foreach: items">
    <li>
        <a><!--ko text: name--><!--/ko--> <span data-bind="text: items.length"></span></a>
    </li>
</ul>

Answer 2

You can also do either

<ul data-bind:"foreach: items">
<li>
<a><span data-bind="text: name"></span> <span data-bind="text: $parent.items().length()"></span></a>
</li>
</ul>

or

<ul data-bind:"foreach: items">
<li>
<a data-bind="text: name() + ' ' + $parent.items().length()"></a>
</li>
</ul>