javascript - 无法从 backbone.js 教程填充 Backbone 集合

Question

我正在这里学习主干教程:http://backbonetutorials.com/

我使用 django + tastypie 作为 restful api 和 backbone + underscore，正如教程建议的用于前端。

但是，我无法遍历我获取的用户集合。

这是我的代码(在 django 模板中):

{% extends "my_app/base_template.html" %}

{% block scripts %}

  <script type="text/template" id="users_template">
    <table class="table striped">
      <thead>
        <tr>
          <th>username</th>
        </tr>
      </thead>
      <tbody>
        <% _.each(users, function(user) { %>
          <tr>
            <td><%= user.get('username') %></td>
          </tr>
        <% }); %>
      </tbody>
    </table>
  </script>

  <script type="application/javascript">
    $(document).ready(
      function() {

        var Users = Backbone.Collection.extend({
          url : "/api/q/user/"
        });

        var UserList = Backbone.View.extend({
          el : ".user_list",
          render : function() {
            var that = this;
            var users = new Users();
            users.fetch({
              success : function(users) {
                var template = _.template($("#users_template").html());
                {# I think that the problem is around here #}
                that.$el.html(template({users : users.models}));
              }
            });
          }
        });

        var user_list = new UserList();

        var Router = Backbone.Router.extend({
          routes : {
            "" : "index"
          }
        });

        var router = new Router();

        router.on("route:index", function(){
          user_list.render();
        });

        Backbone.history.start();

      }
    );
  </script>

{% endblock %} {# /scripts #}

{% block content %}

  <div class="my_stuff">
    <div class="user_list"/>
  </div>

{% endblock %} {# /content #}

而且我可以确认转到“my_domain/api/q/user/”会返回正确的内容(2 个用户:管理员和另一个用户“bob”):

{
  "meta": {
  "limit": 20, 
  "next": null, 
  "offset": 0, 
  "previous": null, 
  "total_count": 2
}, 
"objects": [
  {
    "date_joined": "2014-11-04T04:28:17", 
    "email": "bob@bob.com", 
    "first_name": "Bob", 
    "id": 2, 
    "is_active": true, 
    "is_staff": false, 
    "is_superuser": false, 
    "last_login": "2014-11-04T05:13:46.908539", 
    "last_name": "Bobbington", 
    "password" : "some hash",
    "resource_uri": "/api/q/user/2/", 
    "username": "bob"
  }, 
  {
    "date_joined": "2014-11-03T13:44:04.356967", 
    "email": "admin@domain.com", 
    "first_name": "", 
    "id": 1, 
    "is_active": true, 
    "is_staff": true, 
    "is_superuser": true, 
    "last_login": "2014-11-04T06:06:51.336317", 
    "last_name": "", 
    "password": "some_hash", 
    "resource_uri": "/api/q/user/1/", 
    "username": "admin"
  }] 
}

那么，我做错了什么？我应该将 {{{users.models}} 以外的东西传递给模板吗？我是否错误地遍历了该结构？

谢谢。

Answer 1

开箱即用，Backbone 希望您的对象成为响应的根。如果不是，则需要一些帮助来确定在实例化模型对象时可以使用响应的哪一部分。

基本上你只需要定义一个 Backbone 模型并添加你自己的解析函数:

var user = Backbone.Model.extend({
    parse: function(response) {
        return response.objects;
    }
});

现在您的模型将知道在哪里可以找到您要设置的属性。