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);
};
現在、ページ内に 2 つの選択があります。
<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>
最初の選択ボックスはまったく問題なく入力されていますが、元のモデルで入力されている監視可能な配列を含む 2 番目のドロップダウン ボックスを作成する必要があります。私はこれに間違った方法でアプローチしましたか?
感謝