Including HTML file in Javascript

Question

I know this is a solved problem and the question might sound stupid but I come from a mostly backend, mobile and low-level development background.

I am working on a JS application (pure JS, no framework but structured really nicely). The only issue with the application is that all HTML is written in Javascript. So it would look like:

$div = ('<div>Hello</div>');

And then you can imagine how ugly this can get with all the additions and HTML manipulations. Now this HTML eventually ends up getting included into an index.html file that has a standard layout that all other JS files will end up exporting their HTML into somehow (uses some PHP). I want to be able to create a separate HTML file, and have a JS file use that file. How can I do so? I know typically the problem is the other way round: in the HTML, get the JS/template it. But in this app's case, this is not the issue.

With the current app I have, is there a way to use Handlebars or Underscore, or anything similar, to be able to write the HTML in an HTML file and just include it into the Javascript? I understand that this may require some pre-compilation but this isn't a problem.

The examples on Underscore and Handlebars only show simple HTML examples written the way I have it above. Examples online are showing how to template HTML with Javascript, but not precisely what I want.

Anyone has any suggestions or can help please?

Answer 1

I think you can easily do this using JQuery's $.ajax() method. Here's an exmaple:

$.ajax({
    type: "GET",
    url: "/templates/something.html",
    dataType: "xml",
    success: function (xml) {
        $div = xml;
        console.log('Loaded HTML: ', xml);
    }
});

Answer 2

Handlebars will work for what you're trying to do, and it's super simple to use!

Let's take a simple example (taken from the handlebars website). Assume this is your HTML:

<div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
</div>

All you have to do is put it in a file (let's call it html.handlebars ) then reference that file in a script tag:

<script id="html-template" type="text/x-handlebars-template" src="./html.handlebars"/>

Then from your Javascript you can create a template:

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

then generate the HTML from the template:

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

at this point html will be:

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

which you can use just like any other string of html (ex: $(html).appendTo('body') ).

You can make as many handlebars templates as you want, ranging in size from full pages to small snippets as above.

If performance becomes an issue you can look into precompiling as well: http://handlebarsjs.com/precompilation.html