mariniert, swap childview in collectionVeiw

Question

Wäre es möglich, dynamisch childView in Collection

so etwas wie zu ändern:

//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

Sie im Grunde hätte es, aber, um sicherzustellen, dass die neue Ansicht wird erstellt und Bei richtiger Darstellung müssen Sie die gesamte Sammlungsansicht erneut rendern.

1.) Sie können childView-Ereignisse abhören und die collectionView bei childView-Modelländerungen erneut rendern. Es könnte ein effizienter Weg, dies zu tun, aber dies funktioniert:

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.) Sie auch removeChildView und addChild versuchen können ... aber das ist mehr bewegliche Teile, die Sie verwalten müssen. Wenn Sie mit einer relativ kleinen Liste arbeiten, wird das Rendern der gesamten Leistung nicht schaden.

• 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.) Eine weitere Option ist, wenn sich das Modell ändert, nur collection.reset(data), und dann sicherstellen, dass Sie this.listenTo(this.collection, 'reset', this.render); in Ihrem Kollektion.