Question

是否可以动态更改collectionView

中的childView

类似的东西：

    //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事件并在childView模型更改时重新呈现collectionView。可能有一种更有效的方法可以做到这一点，但这将有效：

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。）您还可以尝试删除ChildView和addChild ...但这涉及您需要管理的更多移动部分。如果你正在处理一个相对较小的列表，重新渲染整个事情不会影响性能。

3。）另一个选项是模型更改时，只需collection.reset(data)，然后确保您在collectionView中this.listenTo(this.collection, 'reset', this.render);。

木偶，交换儿童视图在集合中

1 个答案: