0

我正在尝试为 handelbars.js 创建一个 AJAX 请求（使用 jQuery）（通过它掌握使用模板的概念。

我有这个数据对象和 ajax 请求：

var data = { users: [
  {username: { firstName: "Alan", lastName: "Johnson" } , email: "alan@test.com" },
  {username: { firstName: "Allison", lastName: "House" } , email: "allison@test.com" },
  {username: { firstName: "Ryan", lastName: "Carson" }, email: "ryan@test.com" }
]};

$(document).ready(function(){
    $.get('h1template.js', function(template_text){     
        var template = Handlebars.compile(template_text);
        var html = template(data);
        $('#content').html(html);
    });
});

这是 h1template.js 的内容：

<table>
    <thead>
      <th>Username</th>
      <th>Real Name</th>
      <th>Email</th>
    </thead>
    <tbody>
      {{#users}}
        <tr>
          <td>{{username}}</td>
          <td>{{firstName}} {{lastName}}</td>
          <td>{{email}}</td>
        </tr>
      {{/users}}
    </tbody>
  </table>

有些事情显然是不对的，因为这不起作用

怎么了？我对 ajax 调用本身做错了什么傻事吗？称它为“ .js”而不是“ .php”（例如）？

（我在本地主机中运行该文件，在查看网络属性时，“h1template.js”状态为 304-not-modified）

4

2 回答 2

1

因为模板名称是 .js，所以它被解析为 javascript 文件。因此，您需要将其更改为 .html 或 .php 或任何您喜欢的格式。

同样在 users 对象中，用户名是一个对象，所以在模板中输出 {{username}} 只会给你 [object, object]。您需要将其更改为 {{username.name}}

于 2012-08-20T20:08:30.390 回答
0

我玩了一下代码，发现了如何编写它

h1template.html 文件（而不是 *.js"）：

<table>
...
</table>

主页中的脚本是：

var data = { users: [
      {username: { firstName: "Alan", lastName: "Johnson" } , email: "alan@test.com" },
      {username: { firstName: "Allison", lastName: "House" } , email: "allison@test.com" },
      {username: { firstName: "Ryan", lastName: "Carson" }, email: "ryan@test.com" }
    ]};

$(document).ready(function(){
    $.get('h1template.html', function(template_text){   
        var source   = template_text;
        var template = Handlebars.compile(source);
        var html = template(data);
        $('#content').html(html);
    });
});
于 2012-08-20T20:19:36.527 回答