Model 更改木偶模型的最佳实践。ItemView

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

简单的解决办法是触发

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

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

目前，我们向ItemView类添加了一个changeModel（model）方法

• 将事件解除绑定到上一个模型
• 将新模型指定给视图
• 重新渲染视图
• 将新事件绑定到模型

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

---

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

老实说，我不明白为什么你的第一种方法会不好。这与您使用changeModel方法手动执行的操作几乎相同

我认为最“昂贵”的操作是重新呈现视图（DOM操作），这是您必须做的

我能想到的另一种方法是（使用）：

---

如果我是正确的，这是相当可伸缩的，更新您的DOM应该更快（测试！），并负责数据绑定

您确认了我们的怀疑，DOM重画实际上是最昂贵的操作。我喜欢你的回答（没有足够的声誉给+1，对不起…：）不客气！正如我已经指出的，就DOM操作部分而言，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());