I have implemented a backbone marionette composit view as shown below.
Here is the initialization method.
initialize: function(options) {
log.debug("Initialize");
this.wizard = options.wizard;
this.model = new Feed({
id: options.modelid
});
this.modelid = options.modelid;
this.collection = new Similar();
this.listenTo(this.model, "change", this.onFetch);
this.listenTo(this.model, "reset", this.onFetch);
this.collection.fetch({ data: { id: this.modelid }});
this.model.fetch();
},
and here is the onFetch method
onFetch: function() {
log.debug("Fetch");
this.$el.html(this.template(this.model.toJSON()));}
and finally, the append method
appendHtml: function(collectionView, itemView, index) {
log.debug("appendHtml");
var jsonFeed = itemView.model.toJSON();
if (this.prevFeed === null || jsonFeed.start !== this.prevFeed.start) {
var date = new Date(jsonFeed.start);
collectionView.$(this.itemViewContainer).append('<div class="day-divider c-color box-center" ><h3>' + moment(date).format('DD MMMM') + '</h3></div>');
}
collectionView.$(this.itemViewContainer).append(itemView.el);
this.prevFeed = jsonFeed;
},
After conducting the onFetch function, my collection becomes emptied as it overwrites the HTML content. Here is the log:
DEBUG - Initialize
DEBUG - Render
DEBUG - appendHtml
DEBUG - appendHtml
DEBUG - appendHtml
DEBUG - Render
DEBUG - Fetch
Any suggestions on how this is happening and how I can resolve it?