марионетка, своп childview в collectionVeiw

Question

Будет ли возможность динамически изменять childView в CollectionView

что-то вроде:

//model 
    var FooBar = Backbone.Model.extend({ 
     selected: false, 
    }); 



    //collection view 
    var MyCollectionView = Marionette.CollectionView.extend({ 
      getChildView: function(item) {  
      if (item.selected === true) { 
       return FooView; 
      } 
      else { 
       return BarView; 
      } 
      }, 

      // trigger from child view that should swap views 
      // model.selected is now true 
     triggerFromChildView: function (childview, model) { 
      //how to destroy childview and to re-create one for this model? 
     } 
    }); 

Answer 1

Вы в основном получили его, но для того, чтобы убедиться, что новый вид будет создаваться и правильно сделана, вам необходимо повторно отобразить весь вид коллекции.

1.) Вы можете прослушивать события childView и повторно визуализировать CollectionView при изменении модели childView. Там может быть более эффективный способ сделать это, но это будет работать:

var FooView = Marionette.ItemView.extend({ 
    initialize: function() { 
    this.listenTo(this.model, 'change', function(){ 
     this.trigger('item:model:change'); 
    }); 
    } 
}); 

// get the collection view in place 
var MyCollectionView = new CollectionView({ 
    getChildView: ...  
    //bind the function to the scope of the collection view 
    onChildviewItemModelChange: _.bind(function() { 
    this.render(); 
    },this) 
}); 

2.) Вы можете также попытаться removeChildView и AddChild ... но это включает в себя больше движущихся частей, которые вам нужно управлять. Если вы работаете с относительно небольшим списком, повторное рендеринг всего этого не повредит производительности.

• removeChildView: https://github.com/marionettejs/backbone.marionette/blob/master/src/collection-view.js#L532
• AddChild: https://github.com/marionettejs/backbone.marionette/blob/master/src/collection-view.js#L429

3.) Другой вариант, когда модель изменяется, просто collection.reset(data), а затем убедитесь, что вы this.listenTo(this.collection, 'reset', this.render); в вашем CollectionView.