Marionette drop in new ItemView after every fetch not working -

i working app after every collection.fetch, need drop in random ad dom. but, every time collection fetches, , ad dropped in, appears dom resetting instead of appending new items overall collection container.

here itemview ad:

define(["marionette", "lodash", "text!ads/template.html", "eventer"], function(marionette, _, templatehtml, eventer) {     'use strict';      var adsview = marionette.itemview.extend({         template: _.template(templatehtml),          ui: {             ad: '.ad'         },          initialize: function() {             this.listento(eventer, 'generate:new:ad', this.generatenewad, this);         },          onshow: function() {             // set add image onshow             this.ui.ad.prop('src', '/ad/' + this.randomnumber());         },          generatenewad: function(childview) {             var newad = this.ui.ad.clone(),                 element = childview.$el,                 elementid = childview.model.get("id");              newad.prop('src', '/ad/' + this.randomnumber());              $("#" + elementid).after(newad);         },          randomnumber: function() {             return math.floor(math.random()*1000);         },          setupad: function() {             this.ui.ad.prop('src', '/ad/' + this.randomnumber());         }     });      return adsview; }); 

compositeview holds products (i'm calling new ad after collection done syncing):

define(["marionette", "lodash", "text!fonts/products/template.html", 'fonts/products/item-view', 'fonts/products/model', 'eventer'], function(marionette, _, templatehtml, productitemview, productsmodel, eventer) {     'use strict';      var productsview = marionette.compositeview.extend({          template: _.template(templatehtml),          childview: productitemview,          childviewcontainer: '.items',          productslimit: 150,          initialize: function() {             this.listento(eventer, 'sort:products', this.sortcollection, this);             this.listento(this.collection, 'sync', this.setupsync, this);         },          sortcollection: function(field) {             this.collection.sortbykey(field);         },          setupsync: function() {             this.setupwindowscrolllistener();             this.adgeneration();         },          adgeneration: function() {             var child = this.children.last();             eventer.trigger('generate:new:ad', child);         },          productsend: function() {             eventer.trigger('products:end');         },          setupwindowscrolllistener: function() {             var $window = $(window),                 $document = $(document),                 = this,                 collectionsize = that.collection.length;              if(collectionsize <= that.productslimit) {                 $window.on('scroll', _.throttle(function() {                     var scrolltop = $window.scrolltop(),                         wheight = $window.height(),                         dheight = $document.height(),                         margin = 200;                      if(scrolltop + wheight > dheight - margin) {                         eventer.trigger('fetch:more:products');                         $window.off('scroll');                     }                 }, 500));             } else {                 that.productsend();             }         },     });      return productsview; }); 

from previous question noticed you're passing { reorderonsort: false } productsview. cause compositeview re-render on sort event. since 'sort' event triggered collection.set(), you'll have pass { reorderonsort: true } ensure compositeview not re-rendered after fetch → set → sort.

note: if compositeview defines filter method , children filter'ed when new models fetched, compositeview re-render.