template with table not gets rendered, otherwise does.

[sachingutte]

I've this data -

var data = [{
    "subject_name": "PCD",
}, {
    "subject_name": "DAA",
}];

Handlebar does render above data into following template-

{{#each subjects}}
        <li>{{subject_name}}</li>
{{/each}}  

But when I try to use tables, it does not load it. I used {{#each}} to loop through data but it directly goes to {{else}} section.

<table class="table">
        {{#each subjects}}
            <tr>
                <td>{{subject_name}}</td>
            </tr>
        {{else}}
            <tr>
                <td>No subjects added.</td>
            </tr>
        {{/each}}
 </table>

Here's complete code for test case -

<div id="subjectList" class="hidden">
    {{#each subjects}}
        <li>{{subject_name}}</li>
    {{/each}}   
    <table class="table">
        {{#each subjects}}
            <tr>
                <td>{{subject_name}}</td>
            </tr>
        {{else}}
            <tr>
                <td>No subjects added.</td>
            </tr>
        {{/each}}
    </table>
</div>
<div id="app"></div>

and javascript -

var data = [{
    "subject_name": "PCD",
}, {
    "subject_name": "DAA",
}];

var tpl = Handlebars.compile($("#subjectList").html());
$("#app").html(tpl({
    subjects: data
}));

Example also set up here -
http://jsfiddle.net/K9gLK/

[sachingutte]

When I change <div id="subjectList" class="hidden"> to <script type="text/x-handlebars" id="subjectList"> it's working. But I still don't understand why it works with template inside <li> and why not with template inside <table> tag.

[doowb]

@sachingutte see this comment from a previous issue.

[stefanpenner]

comments in #604 should clarify.

the future HTMLbars project should help mitigate this issue.

[sachingutte]

@doowb thank you for clarification link. @stefanpenner Indeed.