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

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

无法从backbone.js教程填充骨干集合

1 个答案: