I'm encountering an issue with managing my collection. Initially, I populate the attendees into a collection using fetch. This action loads existing attendees from the database into the collection. There is also a button that allows users to add new attendees. However, when a user manually enters an attendee, it seems to clear out the models loaded into the collection via fetch and starts anew. Although all manually added attendees now appear in the collection, I aim for both the fetched loaded and manually added attendees to be listed.
var InviteeView = Backbone.View.extend({
tagName: "tr",
initialize: function() {
this.collection = new InviteeJSONList();
_.bindAll(this, 'render','appendItem','remove','saveInvitee');
},
events: {
"click .removeInvitee":"remove",
"click .saveInvitee":"saveInvitee"
},
render: function() {
var source = $("#invitee-template").html();
var template = Handlebars.compile(source);
var context = inviteeListJSON.attributes['json'];
var html=template(context);
$(this.el).html(html);
return this;
},
appendItem: function() {
$("#attendees").append(this.render().el);
},
remove: function() {
$(this.el).remove();
},
...
Following the fetch() method, which populates the collection with 2 items retrieved from the REST API:
console.log(this.collection.models) outputs:
[d]
[d,d]
However, upon manually adding an attendee through a button, the collection appears to reset:
console.log(this.collection.models) outputs:
[d]