CODEWITHSUNDEEP
javascripthandlebars.js
shava
shava

Reputation: 71

Handlebar templates

I have array with data and When I am trying to compile it with handlebar template, I am getting error as "var fn = options.fn, inverse = options.inverse; - option is undefined" while fetching the value of "column". Can someone let me know what is been missed out here? 

testData = [
  title : 'text1',
  values : {column: [0, 0, 0]}
]


<table>
{{#each}}
<tr>    
    <td>{{title }}</td>
    {{#each values}}
        <td>{{column}}</td> 
    {{/each}}   
</tr>
{{/each}}
</table>



var template = Handlebars.compile(tmpl_src);    
var html = template(testData);
$(body).html(html);

Upvotes: 1

Views: 1013

Answers (1)

mu is too short
mu is too short

Reputation: 434955

I can't reproduce your error but it looks like a Handlebars helper being called incorrectly. The most likely candidate would be your {{#each}} as each is supposed to be called with something to iterate over. We can fix that problem by calling the template function with an object so that your testData has a name inside the template:

var testData = [
    { title : 'text1', values : {column: [0, 0, 0]} },
    //...
];
var template = Handlebars.compile(tmpl_src);    
var html = template({
    rows: testData
});

Then a slight adjustment to the template:

<table>
    {{#each rows}}
        <tr>    
            <td>{{title}}</td>
            {{#each values.column}}
                <td>{{.}}</td> 
            {{/each}}   
        </tr>
    {{/each}}
</table>

I've also adjusted the inner each so that it iterates over the array inside values rather than trying to iterate over values itself, {{.}} refers to the current item so that should give you the zeroes you're after.

Demo: http://jsfiddle.net/ambiguous/CRCG5/

Upvotes: 1

Related Questions