无法从主干.js 教程中填充主干集合答案

【问题标题】：cannot populate backbone collection from backbone.js tutorial无法从主干.js 教程中填充主干集合
【发布时间】：2014-12-31 14:11:53
【问题描述】：

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

按照教程建议的前端，我使用 django + sweetpie 作为 restful api 和主干 + 下划线。

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

这是我的代码（在 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}} 以外的其他内容传递给模板吗？我是不是错误地循环了那个结构？

谢谢。

【问题讨论】：

响应中的 JSON 不仅仅包含您的序列化模型对象。 Backbone 需要一些帮助来确定使用响应的哪个部分来实例化模型实例。看一看：backbonejs.org/#Model-parse
@Brandon - 就是这样。我花了很长时间试图弄清楚这一点。谢谢。如果您重复您的评论作为答案，我会接受。
详细解释可以看这里：stackoverflow.com/questions/12623284/…
从那个问题到主干美味的有趣链接：github.com/PaulUithol/backbone-tastypie

标签： javascript django backbone.js underscore.js tastypie

【解决方案1】：

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

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

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

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

【讨论】：