foreach - Knockout JS foreach 嵌套，所有字段的值更新

Question

我正在使用淘汰赛 js 来完成任务。我的模型是这样的：

var ServiceLevelRates = function(data, availableClasses) {
return {
    TaxTypeID: ko.observable(data.Key),
    TaxTypeName: ko.observable(data.Name),
    ExtendedTaxTypeName: data.Name.replace(/\s+/g, ''),
    ApplyAfter: ko.observable(-1),
    TaxClasses: ko.observableArray(availableClasses)
};
};

var TaxClass = function(data, availableServices) {
return {
    ServiceClassID: data.ServiceClassID,
    ServiceClassName: ko.observable(data.ServiceClassName),
    TaxServices: ko.observableArray(availableServices)
};
};

var TaxService = function(data) {
return {
    ServiceID: ko.observable(data.ServiceID),
    ServiceName: ko.observable(data.ServiceName),
    ServiceRate: ko.observable(data.ServiceRate > 0 ? data.ServiceRate : "").extend({ numeric: 2 })
};
};

我的html就像：

<tbody  data-bind="foreach: ServiceLevelRates">
                    <tr>
                        <td style="width:100%;">
                            <table width="100%">
                                <tr>
                                    <td style="width:2%;">
                                        <img src="../../Images/del_up.gif" onclick="HideMyChilds(this);" />
                                    </td>
                                    <td data-bind="text: TaxTypeName">

                                    </td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td>
                                        <table width="100%">
                                            <tr>
                                                <td style="width:20%;">
                                                    <label id="lblApplyAfter"  myId="lblApplyAfter" runat="server">Apply After</label>
                                                </td>
                                                <td></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <select id="sltApplyAfter" SkinID="drpFields" name="sltApplyAfter" runat="server" myId="sltApplyAfter">
                                                        <option value="-1">Charge</option>
                                                    </select>
                                                </td>
                                                <td>
                                                    <input type="checkbox" />Apply for All Services<input type="text" onkeypress="ValidateDecimalValue(event,this)"; onblur="ApplyForAllServices(this);" data-bind="attr: { 'class': ExtendedTaxTypeName }"  /> %
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="2">
                                                    <table width="100%">
                                                        <tbody  data-bind="foreach: TaxClasses">
                                                            <tr>
                                                                <td style="width:2%;">
                                                                    <img src="../../Images/del_up.gif" onclick="HideMyChilds(this);" />
                                                                </td>
                                                                <td style="width:100%;" class="tdRepeaterHeaderBG" data-bind="text: ServiceClassName">

                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td></td>
                                                                <td>
                                                                    <table width="100%">
                                                                        <thead>
                                                                            <tr>
                                                                                <td style="width:1%;">
                                                                                <td style="width:24%;" class="tdRepeaterHeaderBG">Service Name</td>
                                                                                <td style="width:75%;" class="tdRepeaterHeaderBG">Amount</td>
                                                                            </tr>
                                                                        </thead>
                                                                        <tbody  data-bind="foreach: TaxServices">
                                                                            <tr>
                                                                                <td style="width:1%;">
                                                                                <td style="width:24%;" data-bind="text: ServiceName"></td>
                                                                                <td style="width:75%;">
                                                                                    <input type="text" data-bind="value: ServiceRate, attr: { 'class': $parents[1].ExtendedTaxTypeName, 'id': $parents[1].ExtendedTaxTypeName + ServiceID }"  />%
                                                                                </td>
                                                                            </tr>
                                                                            <tr>
                                                                                <td></td>
                                                                                <td colspan="2">
                                                                                    <div style="font-size: 11px; width:98%;height:5px; border-top: 1px dotted gray;"> </div>
                                                                                </td>
                                                                            </tr>
                                                                        </tbody>
                                                                    </table>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </tbody>

问题是当我为一个类中的税收服务提供 ServiceRate 时，它会更新为所有其他类中相同服务的文本字段。对它的任何帮助都会很棒。

score 6 · Accepted Answer

您的代码有几个问题。

首先，主要是化妆品。您正在使用表格进行布局。仅当您真正需要表格数据时才应使用它们。在大多数情况下，div 或列表要好得多，如果你需要布局某些东西，你可以使用 css 边距。
您正在混合和混合不同的对象方案。
- 一种是返回一个对象字面量：
```
function Foo() {
    return {
        Property: ko.observable(),
    }
}
```
  可以但不应该使用new运算符调用此模式。
- 另一种是基于原型的：
```
function Foo() {
    var self = this;

    self.Property = ko.observable();
}
```
  必须使用new运算符调用此模式。
坚持一种模式是最容易的。通过淘汰赛，后者在某些情况下更容易使用。
您没有对所有属性使用可观察对象。将 observables 用于某些属性而不是其他属性有点令人困惑。您必须返回源代码以确认每个属性。

您的对象模型没有考虑对象重用。您将相同的对象传递给 each ServiceLevelRate，因此当您更新 one 时TaxService，TaxService所有其他的相同对象TaxClass也将被更新。

一个简单的解决方案是将需要更新的字段分解为映射对象。

// This part is constructed once, based on server data.
function TaxService(data) {
    var self = this;

    self.ServiceID = ko.observable(data.ServiceID);
    self.ServiceName = ko.observable(data.ServiceName);
}

// This part is constructed for each TaxClassMapping
function TaxServiceMapping(svc) {
    var self = this;

    self.TaxService = ko.observable(svc);
    self.ServiceRate = ko.observable("");
}

最后; 要根据复选框有条件地更新费率，您可以将其与checked-binding 绑定。在订阅ServiceLevelRate-wide 费率时，您只需检查复选框是否已选中，然后再继续更新其他字段。

self.ApplyForAll.subscribe(function (newValue) {
    if (self.ApplyForAllCheckBox()) {
        ko.utils.arrayForEach(self.Classes(), function (clsMapping) {
            ko.utils.arrayForEach(clsMapping.ClassServices(), function (svcMapping) {
                svcMapping.ServiceRate(newValue);
            });
        });
    }
});

这是一个更新的小提琴：

http://jsfiddle.net/MizardX/V8DTj/

我将模型缩小到基本部分，以使它们更易于使用。

为了TaxServices只显示某些TaxClasses内容，您可以过滤TaxService要为每个对象包含哪些对象TaxClass。

function TaxClassMapping(taxClass, availableServices) {
    var self = this;

    self.TaxClass = ko.observable(taxClass);

    var classID = taxClass.ServiceClassID();
    var filtered = ko.utils.arrayFilter(availableServices, function (svc) {
        // svc.ServiceClassID is a new property in TaxService
        return svc.ServiceClassID() === classID;
    });
    var mapped = ko.utils.arrayMap(filtered, function (svc) {
        return new TaxServiceMapping(svc);
    });
    self.ClassServices = ko.observableArray(mapped);
}

foreach - Knockout JS foreach 嵌套，所有字段的值更新

1 回答 1

Related

Reference