2

I have been using dynamic DOM appending for initializing my app, using jQuery.handlebars as the templating library. But the problem with the jQuery.handlebars is that it does not render template to a dynamically invoked DOM. Example

   $(document).ready(function(){
         $('body').append('<div id="content"></div>');
         $('#content').render('default', {

         });
   )};

default is the template file default.hbs with all templates path properly initialized.

but it works in the case where

index.html

    <div id="#content"></div>

the jQuery file

    $('#content').render('default', {

    });

Another problem with jQuery.handlebars is that it does not append any element in the template using jQuery. Example

default.hbs

    <div id="#append-content"></div>

the jQuery code 

     $('#append-content").html('Hi');

but content "Hi" does not appear.

It is kinda confusing, please enlighten if its wrong or if any disapproval regard usage of jQuery.handlebars, please suggest a new templating library to go with.

cs1193
  • 944
  • 1
  • 12
  • 23
  • Do you have a failing demo in jsbin or jsfiddle? – blessenm Jul 21 '14 at 08:38
  • @blessenm [Demo](http://plnkr.co/edit/dhdg5c04uzrpFM5Q5UiS) this plunker tells you what it is..but first problem is partially solved in this example....appending content inside the template.hbs is a big problem – cs1193 Jul 21 '14 at 09:15

1 Answers1

1

jquery.handlebars render method is asynchronous. You are trying to append to the container before the rendering is complete. The render method triggers a 'render.handlebars' event when its done rendering. Do your DOM manipulation in a callback.

$('#content').render('template', {

}).on('render.handlebars', function() {
  $('#append-content').html("hello");
});
blessenm
  • 30,091
  • 13
  • 63
  • 75
  • Thanks a lot, @blessenm, it worked like charm, btw i can't find much of docs for jquery.handlebars, can i know if you hold any references that could be shared. – cs1193 Jul 21 '14 at 09:42
  • I just went though the source code of the plugin. https://github.com/71104/jquery-handlebars/blob/master/src/plugin.js#L73 Its a pretty simple plugin. Do accept the answer. – blessenm Jul 21 '14 at 09:45