logo标签列表

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

javascriptjsonbackbone.js
8
我翻译的结果如下：

我已经进行了大量的搜索，但是找不到这个问题的答案。我正在尝试使用Backbone.js加载本地JSON文件，并将其呈现到浏览器中的模板中。我的文件下载完毕，模板出现了，但是数据从未填充到模板中。有什么想法吗？提前致谢。

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还不熟悉（第一次发问题），如果需要提供更多信息，请告诉我。

1
也许你应该修复JSON数据，尝试移除“people”，只留下对象数组。 - vadimrostok
2个回答
2

如果你不想修改JSON文件，你可以在PersonCollection中更改解析函数并返回人员数组。例如：

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函数在服务器通过fetch或save返回模型数据时调用。该函数接收原始响应对象，并应返回要设置在模型上的属性哈希表。默认实现是一个空操作，只是简单地将JSON响应传递。如果您需要使用预先存在的API或更好地命名空间响应，请覆盖此方法。

0

您可以直接使用集合（Collection）填充JSON数据。集合将根据JSON对象数组填充数据。在您的情况下，如果您不想更改JSON数据，即如果您想保持“people”属性不变，则可以通过backbone-relational.js填充所有数据。它有助于处理嵌套的JSON数据。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接