将对象引用复制到另一个可观察对象答案

【问题标题】：Copy object reference to another observable将对象引用复制到另一个可观察对象
【发布时间】：2014-09-16 13:38:28
【问题描述】：

在我的 ViewModel 中，main.PlansOptions 是一个 Plans 数组，它使用 3 个 Plan 对象正确初始化。当用户单击按钮时，我想将所选计划的引用复制到 main.SelectedPlan 可观察对象。

问题在于，在 ChoosePlan 函数中，在我将 selectedplan 复制到 main.SelectedPlan 之后，Plan 对象的布尔值（UnlimitedFences 和 ShowAdvertisings) 失去它们的原始值（从假到真）。

我尝试将 main.SelectedPlan 设为计算并使用名为 main.SelectedPlanIndex 的索引获取所选计划，但发生了相同的错误。我相信有一种正确的方法可以将一个对象（具有可观察属性）复制到另一个可观察对象。

任何帮助将不胜感激

计划的定义

function Plan(id, name, monitors, commands, historydays, unlimitedfences, supporttype, showadvertisings) {
    var o = this;

    o.PlanId = ko.observable(id);
    o.Name = ko.observable(name);
    o.Monitors = ko.observable(monitors);
    o.Commands = ko.observable(commands);
    o.HistoryDays = ko.observable(historydays);
    o.UnlimitedFences = ko.observable(unlimitedfences); // boolean
    o.SupportType = ko.observable(supporttype);
    o.ShowAdvertisings = ko.observable(showadvertisings); // boolean
};

查看模型

function PurchasePlanViewModel() {

    var main = this;

    main.PlansOptions = ko.observableArray([]);
    main.SelectedPlanIndex = ko.observable(-1);
    main.SelectedPlan = ko.observable();

    ...

    // Sub View Model (inside of PurchasePlanViewModel)
    main.SelectPlan = new function () {
        var o = this;

        o.ChoosePlan = function (selectedplan) {
            // the problem occurs here -- booleans of selectedplan are set to true
            main.SelectedPlan(selectedplan);
        }

       ...
    }

HTML

<section class="select-plan" data-bind="with: SelectPlan, visible: ShowSelectPlan">
    <div class="plans-options hidden-xs clearfix" data-bind="foreach: $root.PlansOptions">
        <div class="plan-option col-sm-4" data-bind="css: { selected : $root.SelectedPlan() ? PlanId() == $root.SelectedPlan().PlanId() : false }">
            <h4 class="plan-title" data-bind="text: Name"></h4>
            <div class="plan-info">
                <div class="vehicular-price">
                    <span class="price" data-bind="text: VehicularTrackerUnitCost.AsCurrency()"></span>

             ...

             <div class="purchase">
                 <button class="btn btn-block btn-success" data-bind="click: $parent.ChoosePlan" style="margin-top: 10px;">Quero o <span data-bind="text: Name"></span></button>
             </div>
         </div><!-- end of plan-info -->
     </div><!-- end of plan-option -->
 </div><!-- end of plans-options -->

【问题讨论】：

你能创建一个有问题的简单 JSFiddle 演示吗？
PlansOptions 中的原始Plan 是否也发生了变化？
是的，当调用 o.ChoosePlan 并使用 selectplan 初始化 main.SelectedPlan() 时，UnlimitedFences 和 ShowAdvertisings (of selectedplan) 的值在 PlansOptions() 可观察数组中从 false 变为 true
您需要提供更多上下文或一个最小的、独立的示例来演示问题，然后您才有可能得到答案。正如@Ilya 建议的那样，jsfiddle 演示将帮助人们回答您的问题。不知道为什么 ChoosePlan 嵌套在 SelectPlan 中，但是在代码中使用 ... 很难看出它应该如何组合在一起。

标签： knockout.js

【解决方案1】：

您将Plan 从Plans 复制到SelectedPlan，然后更改了原始对象中的UnlimitedFences 和ShowAdvertisings。
UnlimitedFences 和 ShowAdvertisings 在两个对象中都发生了更改是完全正确的！
我认为你的模型不正确。我可以提出另一个模型：

function Plan(id, name, monitors, commands, historydays, unlimitedfences, supporttype, showadvertisings) {
    var o = this;

    o.PlanId = ko.observable(id);
    o.Name = ko.observable(name);
    o.Monitors = ko.observable(monitors);
    o.Commands = ko.observable(commands);
    o.HistoryDays = ko.observable(historydays);
    o.SupportType = ko.observable(supporttype);

};

function PlanHolder(plan, unlimitedfences, showadvertisings)
{
    var o = this;
    o.UnlimitedFences = ko.observable(unlimitedfences); // boolean
    o.ShowAdvertisings = ko.observable(showadvertisings); // boolean
    o.Plan = plan;
    o.clone = function()
    {
        return new PlanHolder(o.Plan, o.UnlimitedFences(), o.ShowAdvertisings());
    }
}

现在，您应该保存 observableArray 或 PlanHolders 而不是 Plan。你应该先克隆PlanHolder，然后再将其复制到SelectedPlan

JSFiddle DEMO 与您的模型。在选择两个对象
JSFiddle DEMO 和PlanHolder 后，unlimitedfences 更改为true。 unlimitedfences 仅在原始对象中更改为 true

【讨论】：