Раскрывающиеся объекты и объекты JSON и привязка выбранного значения

Question

Я работаю над формой ввода данных, состоящей из нескольких выпадающих списков.

Загружаю данные в выпадающие окна из вызова Web Api. Возвращенные данные имеют 3 значения: Id, Value и Code. Я загружаю данные в наблюдаемый массив, и я могу привязать данные к выпадающему списку.

В случае возникновения проблем загружаются значения Value из выпадающих списков в вычисленное значение. Я в основном получаю NaN, и, когда я делаю выбор, я получаю [object Object][object Object].

Вот пример того, что я делаю:

Script

var CountryData = 
    [{"$id":"1","Code":"AMERICA","Value":"A"}, 
     {"$id":"2","Code":"FRANCE","Value":"F"}, 
     {"$id":"3","Code":"GERMANY","Value":"G"}] 

    var ProductData = 
    [{"$id":"1","Code":"Product1","Value":"1001"}, 
     {"$id":"2","Code":"Product2","Value":"1002"}, 
     {"$id":"3","Code":"Product3","Value":"1003"}] 

    var CountryViewModel = function() { 

     var self = this; 

     self.country = ko.observableArray(CountryData); 
     self.countryselected = ko.observable().publishOn("countryselected"); 
    }; 

    var ProductViewModel = function() { 

     var self = this; 

     self.product = ko.observableArray(ProductData); 
     self.productselected = ko.observable().publishOn("productselected"); 
    }; 

    var ProductCodeModel = function() { 
     this.country = ko.observable().subscribeTo("countryselected"); 
     this.product = ko.observable().subscribeTo("productselected"); 

     this.productCode = ko.computed(function() { 
      return this.country() + this.product(); 
     }, this); 
    }; 

    var masterVM = { 
     countryModel: new CountryViewModel(), 
     productModel: new ProductViewModel(), 
     productCodeModel: new ProductCodeModel() 
    }; 

ko.applyBindings(masterVM); 

И HTML

<table> 
    <tr> 
     <td><b>Country:&nbsp;</b></td> 
     <td><select data-bind="options: countryModel.country, optionsText: 'Code', value: countryModel.countryselected, optionsCaption: 'Choose...'"></select></td> 
    </tr> 
    <tr> 
     <td><b>Product:&nbsp;</b></td> 
     <td><select data-bind="options: productModel.product, optionsText: 'Code', value: productModel.productselected, optionsCaption: 'Choose...'"></select></td> 
    </tr> 
</table> 
<br /> 
<br /> 
<div>ProductCode</div> 
<div data-bind="with: productCodeModel"> 
    <span data-bind="text: productCode"></span> 
</div> 

Здесь скрипку http://jsfiddle.net/drfiasco/A6xpX/

Я просмотрел плагин отображения, но я не могу заставить его работать.

Answer 1

Вам необходимо получить доступ к полю кода из двух объектов. В настоящее время вы просто соединяете два объекта вместе.

this.productCode = ko.computed(function() { 
     if(this.country() && this.product()) 
      return this.country().Code + this.product().Code; 
     else 
      return "Please Make Selection Above"; 
    }, this); 

Вот скрипка http://jsfiddle.net/vmysla/A6xpX/8/