Question

我刚刚开始使用handlebars.js试图使用字符串连接和注入来避免渲染动态数据。我试图将模板脚本与主HTML文件分开，并通过函数调用呈现模板文件。

这是我得到的：

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

我似乎在控制台上收到此错误：Failed to load resource: The requested URL was not found on this server.但是，当我将模板添加到Index.html（并从脚本文件中删除ajax调用）时，模板呈现得很好。< / p>

任何人都可以了解为什么会发生这种情况以及如何解决这个问题？

提前致谢。

Answer 1

我设法通过更改此问题来解决问题：

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

到此：

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

感谢所有的建议。

Answer 2

这不是Handlebars的问题;这是你的URL的问题（作为错误说明）;我注意到你正在使用相对路径

templates/requests.html

在AJAX请求中

。如果您使用绝对URL（/templates/requests.html），那是否可以解决问题？

同样，您使用配置为该目录服务的后端服务器是什么？

使用Handlebars.js渲染本地模板

2 个答案: