如何在 Backbone 中克隆模型

Question

我有一个模型可以被某个视图编辑；但是，在视图的底部，用户应该可以选择保存或放弃所有更改。这意味着您需要存储对模型进行的所有更改的列表，然后仅在单击“保存”按钮后进行这些更改。这听起来不必要地复杂，我想出了一个替代方法的想法，即创建模型的克隆并在视图中对其进行更改。然后，如果用户单击“保存”，则删除旧模型并将其集合中的旧模型替换为新模型，否则您将丢弃克隆的模型。

这是一种可接受的方法，如果是，我该如何实施克隆过程？

这相当于再次从服务器获取数据（但似乎不需要额外的 HTTP 请求）。

Answer 1

我通常使用视图上的对象缓存来解决这个问题。这样我就不会为模型/视图管理增加任何不必要的开销。如果用户在没有保存的情况下关闭视图，丢弃自然会发生。

var Model = Backbone.Model.extend({
    'title': 'Hello'
});

var View = Backbone.View.extend({
    initialize: function() {

        // Holds temporary values until save
        this.cache = {};

    },
    onTitle: function() {
        this.cache.title = 'World';
    },
    onSave: function() {
       this.model.set( this.cache );
    }
});

Answer 2

你可以试试Backbone.Memento。

如果你不想使用它没问题。但是，您可以从代码库中了解应该如何完成它。

Answer 3

您可以使用clone 方法。下面的简短示例：

var Model = Backbone.Model.extend({});
var View = Backbone.View.extend({
    initialize: function() {
        this.realModel = this.model;
        this.model = this.realModel.clone();
    },
    onSave: function() {
        this.realModel.set(this.model.attributes);
    }
});

你也可以做一些不同的事情：

var Model = Backbone.Model.extend({});
var View = Backbone.View.extend({
    initialize: function() {
        // save the attributes up front, removing references
        this._modelAttributes = _.extend({}, this.model.attributes);
    },
    onSave: function() {
        // revert to initial state.
        this.model.set(this._modelAttributes);
    }
});