Question

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

{
  "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的新手（发布的第一个问题），请告诉我是否需要提供更多信息。

Answer 1

如果您不想修改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
    }
});

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

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

Answer 2

U可以直接使用您的Collection填充JSON数据。 Collection将根据JSON对象数组来填充数据。在您的情况下，如果您不想更改JSON数据，即如果您想保持'people'属性不变，则可以按backbone-relational.js填充所有数据。它有助于使用嵌套的JSON数据。

将JSON数据渲染到backbone.js模板

2 个答案: