Rendering local templates using Handlebars.js

Question

I've just started using handlebars.js in attempt to move away from rendering dynamic data the ugly way using string concat and injection. I am trying to separate the template script from the main HTML file and render the template file via a function call.

Here is what I've got:

script.js
----------
$(function() {

  var myData = { requests: [
    {id: "1", firstname: "Roger", lastname: "Jones", age: 24},
    {id: "2", firstname: "Phillip", lastname: "Green", age: 44}
    ]};

    $.ajax({
      url: 'templates/requests.html',
      dataType: 'html',
      cache: false,
      success: function(data, status, response) {
        var template = Handlebars.compile(response.responseText);
        var context = myData;
        $('#InjectTemplate_Requests').html(template(context));
      }
    });

});

index.html
-------------
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Handlebars</title>
</head>

<body>
  <div id="InjectTemplate_Requests">

  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.4/handlebars.min.js"></script>
  <script src="script.js"></script>

</body>

</html>

requests.html (template file inside the 'templates' directory)
--------------
<table>
<thead>
<th>Name</th>
<th>Status</th>
<th>Type</th>
</thead>
<tbody>
{{#requests}}
<tr>
<td>{{firstname}} {{lastname}}</td>
<td>{{age}}</td>
</tr>
{{/requests}}
</tbody>
</table>

File Structure
--------------

index.html
|
script.js
| 
|
|---templates
            |
            |
            |---requests.html

I seem to be getting this error on the console: Failed to load resource: The requested URL was not found on this server. However, when I add the template to Index.html (and remove ajax call from the script file), the template renders just fine.

Can anybody shed some light as to why this is happening and how I can fix this?

Thanks in advance.

we don't know what your directory structure is to be able to tell you why you get a 404. Keep in mind the path is relative to the url path of the page that is making the request — charlietfl
– charlietfl, Commented Dec 5, 2014 at 23:36
can you have garbage in-between TR and TBODY tags in an html response without the parser "fixing" it? — dandavis
– dandavis, Commented Dec 5, 2014 at 23:39
@dandavis it's only a string until it's turned into DOM elements. The template compile will change that — charlietfl
– charlietfl, Commented Dec 5, 2014 at 23:43

user1163073 · Accepted Answer · 2014-12-06 00:09:41Z

1

I managed to fix the issue by changing this:

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.4/handlebars.min.js"></script>

to this:

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>

Thanks for all the suggestions though.

answered Dec 6, 2014 at 0:09

user1163073

3177 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aaron Hammond · Accepted Answer · 2014-12-05 23:38:43Z

0

This isn't an issue with Handlebars; it's an issue with your URL (as the error notes); I noticed you're using a relative path

templates/requests.html

in the AJAX request. If you use an absolute URL instead (/templates/requests.html), does that fix the problem?

Likewise, is whatever backend server you're using configured to serve that directory?

answered Dec 5, 2014 at 23:38

Aaron Hammond

6175 silver badges9 bronze badges

6 Comments

user1163073 Over a year ago

I tried that, still getting the same error: Failed to load resource: The requested URL was not found on this server file:///templates/requests.html?_=1417823296897

Aaron Hammond Over a year ago

Are you running this locally? As in, do you just have your index.html file opened in your browser off disk? If so, you're gonna run into issues as most browsers sandbox AJAX to block folks from accessing users' local files.

user1163073 Over a year ago

Yes, I'm running this from a folder on my desktop. I'll try running it from MAMP?

user1163073 Over a year ago

Ok, so when running from MAMP, the errors in console seem to have disappeared. However, nothing is being rendered on index.html. Arrrgghhh!

Aaron Hammond Over a year ago

Now I believe you have an issue in your Handlebars template. The line that reads {{#requests}} should instead be {{#each requests}} and {{/requests}} should be {{/each}}

|

Collectives™ on Stack Overflow

Rendering local templates using Handlebars.js

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related