Question

I have seen this question, and using its method throws up an error on the JS console Uncaught SyntaxError: Unexpected token ).

I am trying to take a recursive array of categories, that have a Children property which is an array of categories, and build them out using a jquery template. Every method I have tried results in some syntax error. I have verified that the object is showing up properly in javascript (its coming from MVC3, using @Html.Raw(Json.Encode(Model.Categories)) to get it into a JS array). Here is the original csharp class

public class CategoryTreeModel
{
    public int Id { get; set; }
    public string Name{ get; set; }
    public bool Selected { get; set; }
    public bool HasChildren { get { return Children.Count > 0; } }
    public List<CategoryTreeModel> Children { get; set; }
}

This original html that calls the first level of the template:

<ul class="nav"  data-bind="template: {name: 'categories_template', foreach: categories}">
        </ul>

and the template itself:

<script type="text/html" id="categories_template">
<li id="category_${Id}" class="category_header">${Name}
   {{if $data.HasChildren }}
        <ul data-bind='template: { name: "categories_template", foreach: Children}'>
        </ul>
   {/if}
</li>      

The template works if I take out the children section of it, rendering the first level properly. I get Uncaught SyntaxError: Unexpected token ) when I use the code as is. What am I doing wrong?

Answer 1

Your last {/if} should be {{/if}}

Here is a sample: http://jsfiddle.net/rniemeyer/vbKVC/