Question

Beginning at coding, JS, today I inject an HTML template several times into the HTML thanks to JS. However, I’am confused by the systematic need to minify the html indentation and fold all the dozen(s) of lines –div, h1, span, table, tr, td, tt– into a single var line. Minified html is both harder to ready and frequently need to be beautified back along the testing phase.

Also: is there a way to keep Beautified indented html in variable ?

Some syntaxe to have a valid version of:

var exampleTpl = "
      <div data-demo-html="true">
        <div data-role="collapsible-set" data-inset="true" data-theme="b" data-content-theme="d">
          <div data-role="collapsible" data-collapsed="false">
            <h4>Heading</h4>
            <ul data-role="listview" data-filter="false" data-inset="true">
              <li><a href="#">List item 1</a></li>
              <li><a href="#">List item 2</a></li>
              <li><a href="#">List item 3</a></li>
            </ul>
          </div>
"

Best thanks in advance,

Answer 1

For templating purpose, you should have a look at the example on Handlebars.js homepage :

Declare your template

<script id="entry-template" type="text/x-handlebars-template">
  <div class="entry">
    <h1>{{title}}</h1>
    <div class="body">
      {{body}}
    </div>
  </div>
</script>

Compile a template in JavaScript

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

Inflate the HTML

var context = {title: "My New Post", body: "This is my first post!"}
var html    = template(context);

This will result in an instance of your template (value injected into your template) :

<div class="entry">
  <h1>My New Post</h1>
  <div class="body">
    This is my first post!
  </div>
</div>