Question

在我的应用程序中，我有一个带有ItemView的CollectionView（它们同时可见）。在列表中单击某个项目时，ItemView将显示其详细信息。

简单的解决方案是触发

bigLayout.itemDetailsRegion.show(new ItemDetailsView({
   model: modelOfClickedItem
});

但这会使先前呈现的ItemView实例关闭并进行垃圾收集，同时在同一位置创建并呈现同一类的新实例。对我和我的团队来说，这闻起来很糟糕（删除和重新创建一个视图对我们来说似乎是无用的开销），但我们是对的吗？

目前，我们将一个changeModel（模型）方法添加到了ItemView类

将事件解除绑定到之前的模型
将新模型分配给视图
重新呈现视图
将新事件绑定到模型

但我们并不满意（很多时候切换模型比这更复杂，而且这个解决方案的可扩展性不是很高）。

对于这种需求，我们可以称之为“最佳实践”吗？标准方式（如上所述）是一种好的做法吗？

Answer 1

老实说，我不明白为什么你的第一种做法会很糟糕。它与您手动使用changeModel方法几乎相同。

我认为最“昂贵”的行动是重新渲染视图（DOM操作），这是你不得不做的事情。

我能想到的另一种方法是（使用http://nytimes.github.io/backbone.stickit/）：

// Create a stickit marionette itemView
var stickitItemView = Backbone.Marionette.ItemView.extend({
    bindings: {},
    render: function(){
        // Invoke original render function
        var args = Array.prototype.slice.apply(arguments);
        var result = Marionette.ItemView.prototype.render.apply(this, args);

        // Apply stickit
        this.stickit();

        // Return render result
        return result;
    }
});

/* Setup a temp model in an itemView.
 * Several ways to do this, either define all attributes again or 
 * clone an existing model for example. In this case I assume you only want to display 
 * data from the model. If you want to modify it as well you'll have to keep a reference.
 * See: http://stackoverflow.com/questions/17517028/how-to-clone-models-in-backbone
/*
var viewInstance = new stickitItemView({
    model: realModel.clone(),
    template: someTemplate,
    bindings: {
        '.some-element': 'attribute1',
        '.another-element': 'attribute2'
    }
});

// Show the view
someRegion.show(viewInstance);

// Use a another model to update the temp model's attributes. 
viewInstance.model.set(anotherRealModel.toJSON());

如果我是正确的，这是非常可扩展的，可以更快地更新你的DOM（测试它！）并负责数据绑定。

更改Marionette.ItemView模型的最佳实践

1 个答案: