Does knockout not like html tag inside another one?

Question

I am buiding a web page with knockout 3.0. All I want to do is to create a bootstrap list with badge, see example and code below

However, when I do it in the knockout template binding like this

<script type="text/html" id="document-template">
    <li class="list-group-item" data-bind="text: Caption">
               <span class="badge" data-bind="text:PageCount"></span>
    </li>
</script>

the page looks like, no span

If I move the span tag outside the li tag like this

<script type="text/html" id="document-template">
    <li class="list-group-item" data-bind="text: Caption"></li>
    <span class="badge" data-bind="text:PageCount"></span>
</script>

I could see my span text - for sure it has wrong css

My question is 1) does knockout just not like one tag inside aonther one? Or 2) did I do something wrong, if I am wrong, could you please give me some suggestion?

Thanks

Answer 1

It is overwriting the contents of your LI element with the text binding. Just put two spans inside your LI:

<script type="text/html" id="document-template">
    <li class="list-group-item">
               <span class="badge" data-bind="text:Caption"></span>
               <span class="badge" data-bind="text:PageCount"></span>
    </li>
</script>