Re-render variables in HTML with Handlebars.js

0
votes

I want to render some variables in my HTML templates after the template has been loaded and rendered by Handlebars. Most variables are available after an AJAX call and I want the template to first load and the data rendered later on, but without re-rendering the whole template. The loaded templates are not wrapped in a Handlebars template <script> tag, they are just plain HTML.

Do I need to wrap all variables that are rendered after the AJAX call in Handlebars <script> tags? Or is there another, more elegant, solution?

1
javascripttemplateshandlebars.js

1 Answers

0
votes

I personally would split my templates between the "main" one, and the parts that will be rendered after the AJAX call is made.

This way, you control what is rendered and when. It's very easy with jQuery:

$.ajax([...], function(data) {
  $("#main .your-selector").append(newTemplate(data));
});

An other solution would be to place ids in your elements, so you can place your data here:

$.ajax([...], function(data) {
  $("#someField").html(data.someData);
});

Hope this helps :)