Javascript 将JSON数据呈现到backbone.js模板_Javascript_Json_Backbone.js

Javascript 将JSON数据呈现到backbone.js模板

javascript json backbone.js

Javascript 将JSON数据呈现到backbone.js模板,javascript,json,backbone.js,Javascript,Json,Backbone.js,我环顾四周，找不到这个问题的答案。我尝试获取一个本地JSON文件，使用Backbone.js加载它，并将其呈现到浏览器中的模板中。我的文件下载后，模板会出现，但它从未被数据填充。有什么想法吗？提前谢谢 HTML <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>People list</title> <link rel

我环顾四周，找不到这个问题的答案。我尝试获取一个本地JSON文件，使用Backbone.js加载它，并将其呈现到浏览器中的模板中。我的文件下载后，模板会出现，但它从未被数据填充。有什么想法吗？提前谢谢

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>People list</title>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
</head>
<body>


  <div class="container">
    <h1>People list</h1>
    <hr />
    <div class="page"></div>
  </div>


  <script type="text/template" id="people-template">

    <table class="table striped">
      <thead>
        <tr>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Age</th>
          <th>Photo</th>
          <th>Video</th>
        </tr>
      </thead>
      <tbody>
        <% _.each(PersonCollection, function(Person) { %>
          <tr>
            <td><%= Person.get("firstName") %></td>
            <td><%= Person.get("lastName") %></td>
            <td><%= Person.get("age") %></td>
            <td><%= Person.get("photo") %></td>
            <td><%= Person.get("video") %></td>
          </tr>
        <% }); %>

      </tbody>
    </table>  
  </script>

  </body>

  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js" type="text/javascript"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>

再次感谢您的建议。我是stackoverflow的新手（发布了第一个问题），所以如果需要提供更多信息，请告诉我。

如果您不想修改JSON文件，可以更改PersonCollection中的解析函数以返回person数组。例如：

var PersonCollection = Backbone.Collection.extend({
    model: Person,
    url: '/people.json',
    parse: function (response) {
        // Return people object which is the array from response
        return response.people
    }
});

主干文档：

每当服务器在fetch和save中返回模型数据时，都会调用parse。将原始响应对象传递给函数，并应返回要在模型上设置的属性哈希。这个默认实现是no-op，只需通过JSON 答复。如果需要使用预先存在的API，请重写此选项，或者最好给你的回答命名名称空间

你可以直接用你的集合填充JSON数据。集合将负责根据JSON对象数组填充数据。在您的情况下，如果您不想更改JSON数据，也就是说，如果您想保持“people”属性的原样，您可以按填充所有数据。它有助于处理嵌套的JSON数据。

也许您应该修复JSON数据，尝试删除

“人”

，只保留包含对象的数组。哇！！这就成功了。非常感谢你！

{
  "people": [
    {
      "firstName": "Jane",
      "lastName": "Doe",
      "age": "32",
      "photo": "test_photo",
      "video": "test_video"
    },
    {
      "firstName": "James",
      "lastName": "Hamm",
      "age": "56",
      "photo": "test_photo",
      "video": "test_video"
    },

var PersonCollection = Backbone.Collection.extend({
    model: Person,
    url: '/people.json',
    parse: function (response) {
        // Return people object which is the array from response
        return response.people
    }
});