определить логику нокаута для зависимых массивов для выпадающих списков

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) Мне нужно как-то определить страны и компании, чтобы они были связаны. Если я меняю страны, тогда соответствующие компании загружаются в выпадающее меню. (так что это. Компании должны быть загружены соответственно этому. Страна, выбранная из этого. Страны.).

Answer 1

Чтобы получить названия компаний, вам необходимо создать расчетные наблюдаемые. Поэтому я предлагаю следующее.

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; 

      } 

     }); 

});