1

URL からバックボーン コレクションを作成した後、モデルが消えるという問題があります。配列をコレクションに渡すだけで、コードは機能します。

コレクション：

var CustomerList = Backbone.Collection.extend({
     model: Customer,
     url: "/customer_list/json"
});

URL は次を返します。

[
   {
      "id":"870000",
      "name":"vitae odio",
      "contact_name1":"ame",
      "contact_number1":"345634565246",
      "contact_name2":"",
      "contact_number2":"",
      "address_line1":"Ap #489-8375 Ornare, Ave2",
      "address_line2":"",
      "town":"Stillwater",
      "county":"Herefordshire",
      "postcode":"JV5H 2QH",
      "email":"parturient@vitae.edu",
      "created_at":"0000-00-00 00:00:00",
      "updated_at":"2012-08-18 16:44:36"
   },
   {
      "id":"870001",
      "name":"mauris, aliquam",
      "contact_name1":"Quail",
      "contact_number1":"82733186940",
      "contact_name2":null,
      "contact_number2":null,
      "address_line1":"Ap #921-368 Cras Ave",
      "address_line2":null,
      "town":"Lake Charles",
      "county":"Essex",
      "postcode":"AP6 0KZ",
      "email":"vitae.dolor@Quisque.edu",
      "created_at":"0000-00-00 00:00:00",
      "updated_at":"0000-00-00 00:00:00"
   }
]

景色：

$(function() {

/* Customer View */
var CustomerView = Backbone.View.extend({
    tagName: 'tr',
    className: 'customer-row',
    template: _.template($('#customerRowTemplate').html()),

    render: function() {
        this.$el.html(this.template(this.model.toJSON()));
        return this.el;
    }
});

/* Customer List View */
var CustomerListView = Backbone.View.extend({
    el: $('#customers'),

    initialize: function() {
        this.collection = new CustomerList();
        this.collection.bind('reset', this.render());
        this.collection.fetch();
    },

    render: function() {
        console.log(this.collection);
        console.log(this.collection.models);

        _.each(this.collection.models, function(customer) {
            this.renderCustomer(customer);
        }, this);
    },

    renderCustomer: function(customer) {
        var customerView = new CustomerView({
            model: customer
        });

        var html = customerView.render();

        this.$el.find('#customer-list').append(html);
    }
});

var customerList = new CustomerListView();

});

console.log(this.collection); を呼び出すとき。モデル配列の長さが 366 であることを示しており、インスペクターですべてのモデルを表示できます。

しかし、console.log(this.collection.models); を呼び出すとき。空の配列を返します。つまり、コレクションは繰り返されないため、レンダリングされません。ここでも、顧客リストを手動で渡すだけで問題なく動作します。

どんな助けでも大歓迎です。

4

2 に答える 2

1

Backbone で何もバインドする必要はありません。ボンネットの下で undescore を正しく使用しています。each メソッドも正しく使用していません。

さらに、アクションをバインドする場合は、関数名を使用する必要があり、実行する必要はありません。

this.collection.bind('reset', this.render);

それ以外の

 this.collection.bind('reset', this.render());

私も試してみます：

initialize: function() {
    this.collection = new CustomerList();
    this.collection.fetch();
},

render: function() {
    console.log(this.collection);
    console.log(this.collection.models);

    this.collection.each(function(customer) {
        this.renderCustomer(customer);
    });
}

「リセット」で正確に何をしたいですか？バインド機能はバックボーン APIにはありません。「オン」という意味ですか？

于 2012-10-27T12:53:53.990 に答える
1

問題はここにあります：this.collection.bind('reset', this.render());

this.render()する必要がありますthis.render。括弧を使用すると、コレクションがモデルをフェッチする前に、その場で関数が呼び出されます。

また、コンテキストをrender関数に渡す必要があります。これは、次の 2 つの方法で実行できます。

  • _.bindAll(this, "render")CustomerListViewinitializeメソッドに追加します。
  • this.collection.bind('reset', this.render, this)this- 3 番目の引数として追加します。

編集

バージョン 0.9.9 以降の場合は、this.listenTo(this.collection, 'reset', this.render)

于 2012-10-27T12:39:02.293 に答える