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呼び出し自体で間違っている何か愚かなことですか？「 .php」ではなく「.js」と呼んでいますか？

（ローカルホスト内でファイルを実行し、ネットワークプロパティを確認すると、「h1template.js」ステータスは304-変更されていません）

4

2 に答える 2

1

テンプレート名は.jsであるため、JavaScriptファイルとして解析されています。したがって、.htmlまたは.php、あるいは好きなものに変更する必要があります。

また、usersオブジェクトでは、usernameはオブジェクトであるため、テンプレートで{{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 に答える