Marionette drop in new ItemView после каждого извлечения не работает

Question

Я работаю с приложением, которое после каждого collection.fetch мне нужно отбросить случайное объявление в DOM. Но каждый раз, когда сбор извлекается и объявление удаляется, кажется, что DOM сбрасывает себя, а не просто добавляет новые элементы в общий контейнер сбора.

Вот ItemView для объявления:

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, который содержит продукты (я звоню новое объявление после сбора делается sync ING):

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), 
       that = 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; 
}); 

Answer 1

С ваш previous question Я заметил, что вы проходите { reorderOnSort: false } на свой ProductsView. Это приведет к тому, что ваш CompositeView будет равен re-render on a sort event. Поскольку 'sort'event is triggered по Collection.set(), вам придется пройти { reorderOnSort: true }, чтобы убедиться, что ваш CompositeView не повторно вынесено после fetch → set → sort.

Примечание: Если CompositeView определяет метод filter и дети filter «под ред когда новые модели будут выбраны, то CompositeView будет re-render.