Handlebar.js does not update my template

Question

OK My HTML looks below.

<div id="json"></div> <div id="content-placeholder"> <script id="some-template" type="text/x-handlebars-template"> <table> <thead> <th>col 1</th> <th>col 2</th> </thead> <tbody> {{#results}} <tr> <td>{{col_1}}</td> <td>{{col_2}}</td> </tr> {{/results}} </tbody> </table> </script> </div> 

And I fill in the above through Handlebar.js, and the data is received from the server. Here is the code.

 $.get(get_data_url, function(data) { $('#json').empty().append(data); var rows = eval('(' + data + ')'); var source = $("#some-template").html(); var template = Handlebars.compile(source); $("#content-placeholder").empty().append(template(rows)); }); 

When the code runs for the first time, it looks fine. But when I call $ .get a second time (etc.), the Template is not updated with new data.

I also print the entire line of data to make sure the data is being updated from the server, and that is.

When I test my Chrome, it tells me: "Uncaught TypeError: cannot call the match method from null."

Is this somehow related to "compilation"?

Answer 1

The first time you do this:

 $("#content-placeholder").empty()... 

Your <div> turns into this:

 <div id="content-placeholder"> </div> 

And your template is gone. Move your template:

 <script id="some-template" type="text/x-handlebars-template"> ... </script> 

somewhere outside #content-placeholder .