3

我有一个公司可能提供的一系列可观察的服务（即销售、服务、咨询）。这些服务中的每一项都可以由公司在零个或多个美国州执行，并且每个州都有一个可选的认证编号。因此，服务具有可观察的位置数组，位置是状态和证书编号的组合。

function Service(name) {
    var self = this;

    self.Name = ko.observable(name);
    self.Locations = ko.observableArray();
}

function Location(state) {
    var self = this;

    self.State = ko.observable(state);
    self.CertNum = ko.observable();
}

在用户界面中，我想显示所有美国州的单个列表。用户将勾选公司运营所在的每个州旁边的复选框，从而制作一个州的“主列表”。反过来，这个主列表驱动出现在每个可能的服务下的选择。

例如，用户在主列表中勾选“Alabama”和“Arizona”。UI 然后将每个服务的单独位置呈现为复选框和文本框的组合。这是主视图模型：

function viewModel() {
    var self = this;

    self.AllStates = [
        { name: "Alabama", abbrev: "AL" },
        { name: "Alaska", abbrev: "AK" },
        { name: "Arizona", abbrev: "AZ" },
        { name: "Arkansas", abbrev: "AR" }
    ];

    self.BusinessStates = ko.observableArray();

    self.AllSelectedStates = ko.computed( function() {
        return ko.utils.arrayFilter( self.AllStates, function(item) {
            return self.BusinessStates.indexOf(item.abbrev) >= 0;
        });
    });

    self.Services = ko.observableArray([
        new Service("Sales"),
        new Service("Service"),
        new Service("Consulting")
    ]);
}

一个简单的视图如下所示：

<h2>Master List</h2>
<ul data-bind="foreach: AllStates">
    <li>
        <label><input type="checkbox" data-bind="value: abbrev, checked: $root.BusinessStates"/> <span data-bind="text: name"></span></label></li>
</ul>

<h2>Services</h2>
<div class="service" data-bind="foreach: Services">
    <h3 data-bind="text: Name"></h3>
    <ul data-bind="foreach: $root.AllSelectedStates">
        <li>
           <label>
             <input type="checkbox" data-bind="value: abbrev, checked: $parent.Locations" /> 
             <span data-bind="text: name"></span>
           </label> 
           <input type="text" placeholder="Cert. Number" data-bind="value: ??" />
        </li>
    </ul>
</div>

该视图至少让我将状态输入到服务的 Locations 数组中，但我不知道如何绑定 CertNum 属性。

假设用户在主列表中选择了阿拉巴马州和亚利桑那州。现在，对于“销售”服务，用户勾选“亚利桑那”并输入“98765”的认证号码。在“咨询”服务下，用户勾选“阿拉巴马州”并且不输入证书编号。理想情况下，我希望生成的 JSON 片段看起来像：

"Services": [
    {
        "Name": "Sales",
        "Locations": [
            {
                "State": { "name": "Arizona", "abbrev": "AZ" },
                "CertNum": "98765"
            }
        ]
    },
    {
        "Name": "Service",
        "Locations": []
    },
    {
        "Name": "Consulting",
        "Locations": [
            {
                "State": { "name": "Alabama", "abbrev": "AL" },
                "CertNum": null
            }
        ]
    }
]

我可以渲染和绑定美国各州的“主名单”。我可以遍历服务并呈现为每个可用服务位置提供控件的 UI（即状态复选框，证书编号的文本框）。我无法绑定服务位置控件以控制相应位置数组中位置的成员资格，并同时影响证书编号的值。

我所做的最接近的尝试非常复杂和hacky，我使用knockout-postBox 插件将viewModel.AllSelectedStates 属性链接到每个Service 模型上的类似属性，然后将新位置推送到每个Service.Locations 数组中. 它几乎可以工作，只是它会在主列表中选中或取消选中状态时清除对服务的更改。此外，我必须将每个可用位置推送到每个服务的 Locations 数组中，并依靠该位置上的 IsSelected 布尔标志来确定它是否已被选中（我宁愿只将位置放在被选中的数组中）。

您可以在此 JSFiddle 中看到尝试：http: //jsfiddle.net/cbono/PU6Sq/23/

它的好处是它演示了 UI 应该如何表现。但我认为如果没有 postBox 插件，这是可能的，我只是没有以正确的方式来解决问题。我已经花了几天的时间来解决这个问题，但无法提出一个 100% 有效的解决方案。

4

1 回答 1

0

visible使用-binding 比管理集合事件更容易。

<li data-bind="visible: State().IsSelected">

http://jsfiddle.net/MizardX/XTkpb/

如果你真的需要处理它们，你可以缓存StateAndCert对象中的Services对象：

var self = this,
    cache = {};

self.Locations = ko.computed(function () {
    return ko.utils.arrayMap(states(), function (item) {
        var key = item.Abbrev();
        if (cache[key] === undefined) {
            cache[key] = new StateAndCert(item);
        }
        return cache[key];
    });
});

http://jsfiddle.net/MizardX/HMAtE/

要从 JSON 渲染中隐藏某些属性，您可以将它们填充到function(){}属性中：

self.Meta = function(){};
self.Meta.IsSelected = ko.observable(false);
于 2012-12-18T08:33:55.640 回答