javascript - Handlebars - data not being displayed at all -

javascript - Handlebars - data not being displayed at all -

hello everyone,

i've been playing around handlebars trying create work in project, maintain getting no results when i'm testing page.

i'm using json info have received page. info should displayed after compiling template. nil happens, no results @ all.

get_items_data.js

var source = $("#mytemplate").html(); var template = handlebars.compile(source); var items = array(); getting_items_data = true; $.get('getitemsdata',function(responsejson) { if(responsejson!=null){ $.each(responsejson, function(key,value) { items.push({ "id": value['item_id'], "blabla": "bla" }); }); } }); $('body').append(template(items));

test.jsp

<script id="mytemplate" type="text/x-handlebars-template"> <table> <thead> <th>items</th> </thead> <tbody> {{#each this}} <tr> <td>{{id}}</td> <td>{{blabla}}</td> </tr> {{/each}} </tbody> </table> </script>

json info format:

[{"itemid":74,"sectionid":4},{"itemid":78,"sectionid":4}]

any ideas may wrong here?

it looks template function called before have info returned, items array empty when elements appended dom. unlike angularjs, handlebars static templating won't update dom if update array later.

try move render logic callback of get:

$.get('getitemsdata',function(responsejson) { if(responsejson!=null){ $.each(responsejson, function(key,value) { items.push({ "id": value['item_id'], "blabla": "bla" }); }); $('body').append(template(items)); } });

javascript jquery handlebars.js