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.

Answer 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.

Answer 2

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?

Rendering local templates using Handlebars.js

Question

2 answers

solution1
1 ACCPTED 2014-12-06 00:09:41

solution2
0 2014-12-05 23:38:43

Rendering local templates using Handlebars.js

Question

2 answers

solution1 1 ACCPTED 2014-12-06 00:09:41

solution2 0 2014-12-05 23:38:43

solution1
1 ACCPTED 2014-12-06 00:09:41

solution2
0 2014-12-05 23:38:43