8

我环顾四周，找不到这个问题的答案。我正在尝试获取本地 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>

JAVASCRIPT

  <script>

    // MODEL MODEL MODEL
    // MODEL MODEL MODEL

    var Person = Backbone.Model;

    // COLLECTION COLLECTION COLLECTION
    // COLLECTION COLLECTION COLLECTION

    var PersonCollection = Backbone.Collection.extend({
      model: Person,
      url: '/people.json',
      parse: function (response) {
        return response
}
    });

    // VIEWS VIEWS VIEWS
    // VIEWS VIEWS VIEWS

    var About = Backbone.View.extend ({
      el: '.page',
      render: function () {
        var that = this;
        var people = new PersonCollection();
        people.fetch({
          success: function (PersonCollection) {
            var template = _.template($('#people-template').html(), {PersonCollection: PersonCollection.models});
            that.$el.html(template);
          }
        })
      }
    });  


    var About = new About ();

    // ROUTES ROUTES ROUTES
    // ROUTES ROUTES ROUTES    

    var Router = Backbone.Router.extend({
      routes: {
        '': 'home'
      }
    });

    var router = new Router();
    router.on('route:home', function () {
      About.render();
    });

    Backbone.history.start();

  </script>

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"
    },

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

4

2 回答 2

2

如果您不想修改 JSON 文件，可以更改 PersonCollection 中的 parse 函数以返回人员数组。例子：

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
    }
});

骨干文档：http ://backbonejs.org/#Model-parse

每当服务器返回模型的数据，获取和保存时，都会调用parse 。该函数传递原始响应对象，并应返回要在模型上设置的属性散列。默认实现是无操作的，只是通过 JSON 响应。如果您需要使用预先存在的 API 或更好的响应命名空间，请覆盖此选项。

于 2013-09-23T11:19:47.397 回答
0

您可以使用您的 Collection 直接填充 JSON 数据。Collection 将负责根据 JSON 对象数组填充数据。在您的情况下，如果您不想更改 JSON 数据，即如果您想保持 'people' 属性不变，您可以通过主干关系填充所有数据。它有助于处理嵌套的 JSON 数据。

于 2014-04-05T07:44:46.410 回答