Question

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

问题在于，在 ChoosePlan 函数之后，我将selectedplan复制到main.SelectedPlan后，Plan对象的布尔值（ UnlimitedFences 和 ShowAdvertisings ）丢失原始值（从false到true）。

我已经尝试使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 -->

Answer 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个PlanHolder而不是Plan。您应该在将PlanHolder

复制之前克隆SelectedPlan

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

中更改为true

将对象引用复制到另一个observable

1 个答案: