javascript - Backbone.js 中的集合不触发事件

Question

当对给定集合中的模型的更改被触发时，我正在尝试执行一个操作，但每当我尝试将监听器放在 change 上时，add ，或 remove 我的收藏中的事件，不会触发任何事件。当我将更改事件附加到模型的 initialize 函数(只是为了测试)时，change 事件被成功触发。下面的 View 本身不会更改代码，但我希望它在对集合进行更改时重新呈现。我的设置可能有问题，但我想得到你的建议。下面是我的代码:

contact.js(模型):

define([
  'jquery',
  'underscore',
  'backbone'
], function($, _, Backbone){

  var ContactModel = Backbone.Model.extend({
        urlRoot: '/contacts'
    });

  return ContactModel;
});

contacts.js(集合):

define([
  'jquery',
  'underscore',
  'backbone',
  'models/contact'
], function($, _, Backbone, Contact){

  var ContactCollection = Backbone.Collection.extend({
    url: '/contacts',
    model: Contact
  });

  return ContactCollection;

});

contactlist.js( View ):

define([
  'jquery',
  'underscore',
  'backbone',
  'text!templates/contactlist.html',
  'collections/contacts'
], function($, _, Backbone, contactListTemplate, Contacts){

  var ContactListView = Backbone.View.extend({
    el: '.contact-list',
    render: function(options) {
        var that = this;
        var contacts = new Contacts();
        contacts.on("add", function() {
            console.log('change');
        });
        contacts.fetch({
            success: function(contacts) {
                var results = contacts.models;
                if (options.query || options.query === '') {
                    var results = [];
                    var query = options.query.toUpperCase();
                    for (var contact in contacts.models) {
                        if (contacts.models[contact].get('firstname').toUpperCase().indexOf(query) !== -1 ||
                                contacts.models[contact].get('lastname').toUpperCase().indexOf(query) !== -1 ||
                                contacts.models[contact].get('email').toUpperCase().indexOf(query) !== -1 ||
                                contacts.models[contact].get('phonenumber').toString().toUpperCase().indexOf(query) !== -1)
                        {
                            results.push(contacts.models[contact]);
                        }
                    }
                    options.idclicked = null;
                }
                if (!options.idclicked && results[0]) {
                    options.idclicked = results[0].get('id');
                    Backbone.history.navigate('/contacts/' + results[0].get('id'), {trigger: true});
                }
                var template = _.template(contactListTemplate, {contacts: results, idclicked: options.idclicked});
                that.$el.html(template);
                $(document).ready(function() {
                    $('.contact-list').scrollTop(options.scrolled);
                });
            }
        });
    },
    events: {
        'click .contact': 'clickContact'
    },
    clickContact: function (ev) {
        $('.contact-clicked').removeClass('contact-clicked').addClass('contact');
        $(ev.currentTarget).addClass('contact-clicked').removeClass('contact');
        window.location.replace($(ev.currentTarget).children('a').attr('href'));
    }
  });

  return ContactListView;

});

Answer 1

自 Backbone 1.0 ( change log ) 以来，这个问题的答案不再是 100% 准确。

在 Backbone 1.0+ 中，如果你想要 reset 事件触发。见下文。

在集合上调用 fetch 现在会触发 3 个不同的事件:

---

collection.fetch(); //triggers the following events

1. request:在ajax请求发出前触发
2. add:(多次)此事件将被触发多次，因为每个项目在数据被添加到集合中。
3. sync:集合上的数据与集契约(Contract)步后触发数据提供者(数据添加到集合，ajax 请求完成)

---

要恢复到 Backbone 事件的旧样式，您需要调用

collection.fetch({ reset: true }); //triggers the following events

1. request:在ajax请求发出前触发
2. reset:当所有数据都放入集合中时触发。
3. sync:集合上的数据与集契约(Contract)步后触发数据提供者(数据添加到集合，ajax 请求完成)

---

快速查看您的集合正在触发哪些事件的最佳方法是绑定(bind)到all 事件并记录参数:

collection.on('all', function() {
    console.log(arguments);
});