模型内的淘汰赛 JS 绑定数组

Question

我有一个由 observableArray 组成的模型

function developmentModel(id, name, town, postcode, selected, developmentAddress) {
    var s = this;
    s.Id = ko.observable(id);
    s.Name = ko.observable(name);
    s.Town = ko.observable(town);
    s.Postcode = ko.observable(postcode);
    s.Selected = ko.observable(selected);
    s.DevelopmentAddress = ko.observableArray(developmentAddress);
    s.DisplayName = ko.computed(function() {
        return s.Name() + ", " + s.Town() + ", " + s.Postcode();
    });
}

这个 observableArray 使用了不同的模型：

function developmentAddressModel(id, street1, street2, loc1, loc2, town, postcode) {
    var s = this;
    s.Id = ko.observable(id);
    s.Street1 = ko.observable(street1);
    s.Street2 = ko.observable(street2);
    s.Loc1 = ko.observable(loc1);
    s.Loc2 = ko.observable(loc2);
    s.Town = ko.observable(town);
    s.Postcode = ko.observable(postcode);
    s.DisplayName = ko.computed(function() {
        var result = s.Street1() !== undefined ? s.Street1() + ", " : "";
        result += s.Street2() !== undefined ? s.Street2() + ", " : "";
        result += s.Loc1() !== undefined ? s.Loc1() + ", " : "";
        result += s.Loc2() !== undefined ? s.Loc2() + ", " : "";
        result += s.Town() !== undefined ? s.Town() + ", " : "";
        result += s.Postcode();

        return result;
    });
}

并且完全没有问题地被映射：

connection.client.developmentList = function(developments) {
        console.log("Returned a total of " + developments.length + " development(s)");
        var mappedDevelopments = $.map(developments, function (development) {
            var addresses = [];
            for (var i = 0; i < development.DevelopmentAddresses.length; i++) {
                var addressObject = development.DevelopmentAddresses[i].Address;
                var address = new developmentAddressModel(addressObject.Id, addressObject.Street1, addressObject.Street2, addressObject.Locality1, addressObject.Locality2, addressObject.Town, addressObject.Postcode);
                addresses.push(address);
            }
            return new developmentModel(development.Id, development.Name, development.DevelopmentAddresses[0].Address.Town, development.DevelopmentAddresses[0].Address.Postcode, false, addresses);
        });

        self.propertyDevelopmentList(mappedDevelopments);
    };

现在我的页面中有两个选择：

<select data-bind="options: propertyDevelopmentList, optionsText: 'DisplayName', value: selectedPropertyDevelopment, visible: propertyDevelopmentList().length > 0"></select

<select data-bind="options: propertyDevelopmentList.DevelopmentAddress, optionsText: 'DisplayName', value: selectedDevelopmentAddress, visible: propertyDevelopmentList().length > 0"></select>

第一个选择框的填充完全没有问题，但我需要使用原始模型填充的可观察数组创建第二个下拉框。我是不是走错了路？

谢谢

Answer 1

您必须从选定的开发中获取DevelopmentAddress 数组。我建议您按如下方式更新您的代码：

<select data-bind="options: propertyDevelopmentList, optionsText: 'DisplayName', value: selectedPropertyDevelopment, visible: propertyDevelopmentList().length > 0"></select

<select data-bind="options: selectedPropertyDevelopment().DevelopmentAddress, optionsText: 'DisplayName', value: selectedDevelopmentAddress, visible: propertyDevelopmentList().length > 0"></select>