How to indent HTML in a Handlebars data object

Question

So I'm using Handlebars to template a static HTML site.

What I am having trouble with is indenting the HTML inside the data object copyright. If I had multiple h1's in the object, I want to able to format it nicely, like in my example.

When trying to indent the HTML in the data object, I get a syntax error in the console: unterminated string literal.

$(function() {
  // Grab the template script
  var theTemplateScript = $("#address-template").html();

  // Compile the template
  var theTemplate = Handlebars.compile(theTemplateScript);

  // Define our data object (this one works)
  var copyright = {
    "copyright": "<h1>This is heading 1</h1>"
  };

  ////////
  // This one doesn't work
  ////////
  var copyright = {
    "copyright": "
        <h1>This is heading 1</h1>
        <h1>Another heading indented</h1>
        "
  };

  // Pass our data to the template
  var theCompiledHtml = theTemplate(copyright);

  // Add the compiled html to the page
  $('.content-placeholder').html(theCompiledHtml);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--This is our template. -->
<!--Data will be inserted in its according place, replacing the brackets.-->
<script id="address-template" type="text/x-handlebars-template">
  <div>{{{copyright}}}</div>
</script>

<!--Your new content will be displayed in here-->
<div class="content-placeholder"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.4/handlebars.min.js"></script>
<script src="index.js"></script>

score 2 · Answer 1 · answered Nov 04 '15 at 16:35

I think better put html tags to templates, so in this case you can add to copyright strings and in template use each like this

$(function () {
  var theTemplateScript = $("#address-template").html();
  var theTemplate = Handlebars.compile(theTemplateScript);
  var copyright = {
    "copyright": [
       'This is heading 1', 
       'Another heading indented'
    ]
  };
  
  var theCompiledHtml = theTemplate(copyright);

  $('.content-placeholder').html(theCompiledHtml);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.4/handlebars.min.js"></script>

<script id="address-template" type="text/x-handlebars-template">
  <div>
    {{#each copyright}}
      <h1>{{this}}</h1>
    {{/each}}
  </div>
</script>

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

Agreed: Your Handlebars template should contain your markup. Your JSON should just populate it with data. — gfullam, Nov 06 '15 at 20:24

Tomasz Jakub Rup · Accepted Answer · 2015-11-06T20:38:34.950

1

Proper multiline formatting:

var copyright={
    "copyright":"\
    <h1>This is heading 1</h1>\
    <h1>Another heading indented</h1>\
    "
};

or better:

var copyright={
    "copyright": "<h1>This is heading 1</h1>" +
    "<h1>Another heading indented</h1>"
};

edited Nov 06 '15 at 20:38

answered Nov 04 '15 at 16:33

Tomasz Jakub Rup

10,502
7
48
49

It is generally not considered good practice to use this pattern because of inconsistent behavior among browsers and the fact that it breaks during minification (removal of whitespace). See [this answer](http://stackoverflow.com/a/6247331/2502532) on a similar SO Q&A. See also the myriad caveats mentioned in the comments to [this unfortunately accepted answer](http://stackoverflow.com/a/805113/2502532). – gfullam Nov 06 '15 at 20:23
@gfullam For HTML parsers `
` and `
\n
` is exactly the same. – Tomasz Jakub Rup Nov 06 '15 at 20:41

How to indent HTML in a Handlebars data object

2 Answers2