为下拉列表定义依赖数组的剔除逻辑

Question

我正在使用 WebApi 来返回带有公司的国家/地区。

返回的对象格式如下：

[{"$id":"1", "Name":"Denmark", "Currency":"DKK", "Companies":[],",
{"$id":"2","Name":"Belgium","Currency":"EUR","Companies":[],

{"$id":"3","Name":"Austria","Currency":"EUR","Companies":[{"$id":"4","Name":"Belgium Company 1"},...]

因此，有一个国家/地区列表，每个国家/地区都有一个公司列表。

如何将此结构映射到淘汰赛？

我有具有不同属性的淘汰模型viewModel：

 this.objectId = ko.observable();
 this.Country = ko.observable(); // this is selected country for given object
 this.Countries = ko.observableArray();
 this.Company = ko.observable(); //this is selected company for given object
 this.Companies = ko.observableArray();
 this.ContactName = ko.observable();
 ...

当页面加载时，我正在填充 viewModel 和绑定 UI。在此期间，我还调用 webApi 并以上述格式获取国家+公司。

    function _getCountries() {
    return $.ajax({
        url: "/api/portfolio/GetCountries",
        contentType: "application/json",
        dataType: "json",
        type: "GET"
    });
}

我在模型初始化期间调用 _getCountries，加载模型数据，如 objectId、ContactName 等。完成此初始化后，我正在调用 _getCountries：

 _getCountries().done(function (dataJson) {
        ko.mapping.fromJS(dataJson, {}, ParentModel.ChildModelInst.Countries);
    }).fail(function () {
        alert("fail");
    });

this.Countries 和 this.Companies 应该用于填充下拉菜单，例如：

<select data-bind="options: Countries, value: Country"></select>                    

问题/问题： 1）以上不起作用，因为国家由对象组成，它向我显示带有“对象”的下拉列表

2) 我需要以某种方式定义国家和公司，以便它们相互关联。如果我更改国家/地区，则将适当的公司加载到下拉列表中。 （因此 this.Companies 应根据 this.Country 加载，即从 this.Countries 中选择的项目）。

Answer 1

您需要创建计算的 observable 来获取公司名称。所以我建议关注。

国家和公司下拉菜单的 HTML

<select data-bind="options: Countries, value: Country, optionsText: 'Name'"></select>

<select data-bind="options: filteredCompanies, optionsText: 'Name'"></select>

在“国家”的订阅事件中创建计算函数以返回所选国家/地区的公司列表

this.Country.subscribe(function(value) {

      self.filteredCompanies = ko.computed(function() {

          if (value.Companies != undefined){
              return value.Companies;

          }

        });

 });