Question

So I’ve got a template I’m using to do some recursion on some objects that may have child elements. I’ve got the if statement working how I want it to (I think). However, my child elements are only showing up if I have an extra li before the if statement.

Here’s my template

<script type="text/html" id="journalTemplate">
<li data-bind="text: Description">
    <div>
    <li data-bind = "visible: IsGroup"></li>
    <!-- ko if: IsGroup -->
    <ol data-bind="template: {name: 'journalTemplate', foreach: ChildEntities}">
    </ol>
    <!-- /ko -->
    </div>
</li>

I’m using array mapping, so there’s no real view model to show, but the C# object is pretty simple: It has a Description, a bool IsGroup, and a list of ChildEntities (which is null if IsGroup is false, as a side note). If I don’t have the empty li, the comment blocks of the if statement don’t even show up.

Any ideas?

Answer 1

OK I see the issue. The problem is your text binding on your LI.

Text in html is represented by textNode dom elements which although they can’t be written explicitly in html markup, they behave the same way. Effectively your text binding is replacing the innerHtml of your LI with whatever text it has.

What I’m less clear on is why your extra invalid LI element stops the total replacement of the innerHtml…

Anyway the correct solution is to structure your template like this.

<script type="text/html" id="journalTemplate">
    <li>
        <span data-bind="text: Description"></span>
        <!-- ko if: IsGroup -->
        <ol data-bind="template: {name: 'journalTemplate', 
                  foreach: ChildEntities}">
        </ol>
        <!-- /ko -->
    </li>
</script>

http://jsfiddle.net/madcapnmckay/F2vSW/1/

Hope this helps.