【问题标题】:Knockout: copy values from one model instance into another model instance淘汰赛:将值从一个模型实例复制到另一个模型实例
【发布时间】:2013-12-06 02:53:14
【问题描述】:

我有两个 Knockout Model 实例(ModelInstance1 和 ModelInstance2)。对于这两种情况,所有绑定都已应用,并且页面加载了两种不同的表单。

用户可以看到一个表单,并允许用户进行内联编辑。对于这个表单,我使用 ModelInstance1。

另一种形式是在单击编辑按钮时出现的模态形式。此表单使用 ModelInstance2。如果用户单击“取消”,则不会将任何值保存到数据库并关闭模式表单。

现在我需要在我的自定义事件上(想象一下它是单击按钮)将所有值从一个实例复制到另一个实例。

当然,我可以手动这样做:

 ModelInstance2.FirstName(ModelInstance2.FirstName());
 ModelInstance2.LastName(ModelInstance2.LastName());
 etc.

但是有没有其他方法可以做到这一点?

考虑到我的模型包含可观察对象、可观察数组、计算对象和订阅对象。

【问题讨论】:

    标签: javascript knockout.js


    【解决方案1】:

    为您的模型编写构造函数,以便它可以将普通对象作为初始值设定项。然后你可以通过这样做来克隆一个模型

    var modelInstance2=new Model(ko.utils.parseJSON(ko.toJSON(modelInstance1)));
    

    您需要序列化为 JSON,然后解析结果以获得深层副本(对象和数组等引用类型的属性是实际副本,而不是对原始对象的引用)。如果你这样做了

    var modelInstance2=new Model(ko.toJS(modelInstance1));
    

    那么你会得到一个浅拷贝,更改modelInstance2 中的任何引用类型属性也会更改modelInstance1 中的它。

    【讨论】:

    • 这仍然不允许回复绑定,对吧?好像modelInstance2已经绑定的时候就不行了。
    【解决方案2】:

    怎么样...

    var Model = function (firstName, lastName) {
        var self = this;
         self.FirstName = ko.observable(firstName);
         self.LastName = ko.observable(lastName);
         self.clone = function () {
             return new Model(this.FirstName(), this.LastName());
         };
    }
    
    var instance1 = new Model('Jon', 'Smith');
    var instance2 = instance1.clone();
    

    如果您有可用的淘汰制映射扩展程序,您可以随时执行此操作....

    var temp = ko.toJS(instance1);
    var instance2 = ko.mapping.fromJS(temp);
    

    http://knockoutjs.com/documentation/plugins-mapping.html

    如果您不想维护一个克隆对象的方法,那么映射是一个不错的选择,我想不出其他方法来处理它。这些似乎是您的选择。

    【讨论】:

    • 我有 20 个属性,包括数组、计算值等。另外,我对 instance1 和 instance2 有不同的订阅,你的方法会丢失它们。我需要复制值而不是初始化新模型。
    • @renathy 我不明白.. 这只是向您展示了一种封装该逻辑的方法,而不必一次又一次地复制它。无法确切知道需要从您的示例中复制哪些类型的属性等...这适用于可观察数组...根本不需要复制计算值。
    • 它不起作用,它不会更新值。我想它会在页面加载时起作用,但在绑定后不起作用,我错了吗? Instance2 之前已创建。
    • 那是因为您已经对实例应用了绑定...您需要重新应用绑定。
    • 如何重新应用绑定?
    猜你喜欢
    • 1970-01-01
    • 2018-10-29
    • 1970-01-01
    • 2014-10-08
    • 2015-02-27
    • 2023-03-23
    • 2016-08-22
    • 1970-01-01
    • 2013-01-26
    相关资源
    最近更新 更多