context is not getting passed for handlebars

Question

I am using handlebars template. I have stumbled across a strange problem. Following code is not passing context to compiled handlebars template when used on browser but strange thing is that same code works fine in jsfiddle ! https://jsfiddle.net/5pnfrjwa/

Here is my code

<!DOCTYPE html>
<html>

  <head>
    <title>Page Title</title>
  </head>

  <body>
    {{> navbar this }}

    <div id="render_here">
      first
    </div>

    <div id="render_here_again">
      second
    </div>

    <script id="first-template" type="text/x-handlebars-template">
      <div>
        <div> Inside first template</div>
        <h4 style="color:green">title1 :{{title1}}</h4>
        <h4 style="color:blue">body1 :{{body1}}</h4>
        <h4 style="color:blue">context : {{context}}</h4>
      </div>
    </script>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.4/handlebars.js"></script>
    <script>
      $(document).ready(function() {

        var source = $("#first-template").html();
        var template = Handlebars.compile(source);


        var context
          // = "test 1"
          = {
            title1: "hello",
            body1: "body1"
          }

        var el_html = template(context);

        console.log("*** This is source                 : " + source);
        console.log("*** This is template               : " + template);
        console.log("*** This is template(context)      : " + el_html)
        console.log(" data is : " + context.title1)

        // $(document.body).append(el_html);
        // $("#render_here").html(el_html);
        // $("#render_here_again").html(el_html);
        // document.getElementById('render_here_again').innerHTML = template(context);
        $("#render_here_again").html(el_html)

      });

    </script>
  </body>

</html>

I displayed source to console and here is the output

*** This is source                 : 
      <div>
        <div> Inside first template</div>
        <h4 style="color:green">title1 :</h4>
        <h4 style="color:blue">body1 :</h4>
        <h4 style="color:blue">context : </h4>
      </div>

If same is displayed on jsfiddle, its as below:

*** This is source                 : 
      <div>
        <div> Inside first template</div>
        <h4 style="color:green">title1 :{{title1}}</h4>
        <h4 style="color:blue">body1 :{{body1}}</h4>
        <h4 style="color:blue">context : {{context}}</h4>
      </div>

It seems variable name is coming in the source in double curly brackets on jsfiddle but its not coming on my locale machine. Any idea why this behaves differently on browser and jsfiddle. I tried it with chrome and Mozilla but facing same issue with both. I am using nodejs and expressjs at server side.

Edit one It seems I might have identified the issue but I am still searching for solution. This is happening when I am rendering this pages from express 4 server. If I open simple html file with above code, its working fine.

score 2 · Answer 1 · answered Sep 17 '17 at 18:07

2

Try to escape from curly braces with a backslash, to avoid rendering on the server side.

<script id="first-template" type="text/x-handlebars-template">
  <div>
    <div> Inside first template</div>
    <h4 style="color:green">title1 :\{{title1}}</h4>
    <h4 style="color:blue">body1 :\{{body1}}</h4>
    <h4 style="color:blue">context : \{{context}}</h4>
  </div>
</script>

answered Sep 17 '17 at 18:07

Sebastian Schulz

391
2
7

Tried this and its working. Thanks a lot. I saw some of the examples where it was used without escaping and it was working fine. is there any other way ? – Conquistador Sep 17 '17 at 18:31
There is a lot of solutions, take a look at a topic about [Mustache templates](https://stackoverflow.com/questions/13944623/escape-double-braces-in-mustache-template-templating-a-template-in-n): e.g. registerHelper/tags method or replacing characters on server side. – Sebastian Schulz Sep 17 '17 at 18:46
I am wondering, if I pre-compile this part of code on server and during run-time only pass content to pre-compiled handlebarsjs code, it should work. I will check this today evening and will let you know. – Conquistador Sep 18 '17 at 12:13

context is not getting passed for handlebars

1 Answers1