Trunk "reset" capture trigger does not fire

Question

I use backbone.js to get the collection from the REST server. Generate triggers in order and populate the collection with data. However, the reset trigger never fires, so addAll () is never called. Calling the addAll () function manually works fine - but why doesn’t the "reset" function work as needed when the fetch () function is called in the collection?

Here is the code:

Model

define(['backbone-tastypie'], function(Backbone) { var Machine = Backbone.Model.extend({ url: function(){ return this.get('resource_uri') || this.collection.url; } }); return Machine; }); 

Collection

 define(['backbone-tastypie','models/machine'], function(Backbone, Machine) { var Machines = Backbone.Collection.extend({ model: Machine, url: '/api/rest/machine/', parse: function(data){ return data.objects; } }); return Machines; }); 

Model view

 define(['underscore','backbone-tastypie'], function(_, Backbone) { var MachineTableEntryView = Backbone.View.extend({ tagName: 'tr', template: _.template($('#machine-row-template').html()), render: function(){ $(this.el).html(this.template(this.model.toJSON())); console.log('lol'); return this; } }); return MachineTableEntryView; }); 

Main view

 define(['underscore','backbone-tastypie','collections/machines','views/machine_table_entry'], function(_, Backbone, Machines, MachineTableEntryView) { var MachineTableView = Backbone.View.extend({ el: $('#app'), initialize: function(){ _.bindAll(this, 'addOne', 'addAll'); Machines.bind('reset', this.addAll); this.machines = new Machines(); this.machines.fetch(); }, addAll: function(){ this.machines.each(this.addOne); }, addOne: function(machine){ var view = new MachineTableEntryView({model:machine}); this.$('#machines').append(view.render().el); }, }); return MachineTableView; }); 

Answer 1

You need to associate the event listener with an instance of the collection being created, and not with the Collection constructor:

 define(['underscore','backbone-tastypie','collections/machines','views/machine_table_entry'], function(_, Backbone, Machines, MachineTableEntryView) { var MachineTableView = Backbone.View.extend({ el: $('#app'), initialize: function(){ _.bindAll(this, 'addOne', 'addAll'); this.machines = new Machines(); this.machines.bind('reset', this.addAll); this.machines.fetch(); }, addAll: function(){ this.machines.each(this.addOne); }, addOne: function(machine){ var view = new MachineTableEntryView({model:machine}); this.$('#machines').append(view.render().el); }, }); return MachineTableView;