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等模型数据。当这个init完成后，我调用_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;

          }

        });

 });

为依赖数组定义敲除逻辑以获得下拉列表

1 个答案: