Knockout.js：ajaxコールで設定された選択からテキストを取得

Question

私はknockout.jsをフロントエンドのデータマニピュレータとして使用し、AJAX呼び出しでサーバからデータを取得しています。

私はAJAXを介して値と文字列をoptionTextとして使用して、一連のドロップダウンを作成しました。これらのドロップダウンの選択されたオプションのoptionTextを別のdivで捕捉する必要があります。これまで、他のスタックオーバーフローの答えとは異なるメソッドを使用して、私はそれを行うことができませんでした。

ビュー

<div> 
    <select data-bind="options: provinces,optionsText:'name',optionsValue:'id',value: provincesSelected "></select> 
     <select data-bind="options: regions,optionsText:'name',optionsValue:'id',value: regionsSelected"></select> 
    <select data-bind="options: cities,optionsText:'name',optionsValue:'id',value:citiesSelected"></select> 
</div> 
<div> 
    <div> 
     <div> 
      <div> 
       <span data-bind="text: citiesSelected().name"></span> 
      </div>  
     </div> 
    </div>  
</div> 

のViewModel

function getProvinces(provinces) { 
$.ajax({ 
    url: "resturl1", 
    type: "POST", 
    success: function (data) { 
     var dats = JSON.parse(data); 

     provinces(dats); 
     return provinces; 

    } 
});}function getRegionsByProvince(regions, province) { 
$.ajax({ 
    url: "resturl2", 
    type: "POST", 
    data: {province: province}, 
    success: function (data) { 
     var dats = JSON.parse(data); 

     regions(dats); 

     return regions; 

    } 
});}function getCitiesByRegion(cities, region) { 
$.ajax({ 
    url: "resturl3", 
    type: "POST", 
    data: {region: region}, 
    success: function (data) { 
     var dats = JSON.parse(data); 

     cities(dats); 

     return cities; 

    } 
});} 

function AppViewModel() { 
var self = this; 

self.provinces = ko.observableArray(); 
self.provincesSelected = ko.observable(); 
self.regions = ko.observableArray([]); 
self.regionsSelected = ko.observable(); 
self.cities = ko.observableArray([]); 
self.citiesSelected = ko.observable(); 

self.provinces(getProvinces(self.provinces)); 

self.provincesSelected.subscribe(function (val) { 
    self.regions(getRegionsByProvince(self.regions, val)); 
}); 
self.regionsSelected.subscribe(function (val) { 
    self.cities(getCitiesByRegion(self.cities, val)); 
}); 


}ko.applyBindings(new AppViewModel()); 

これは私が（に来て、 "名前" プロパティを取得しようとした最後のものである：ここでは

コードですサーバーの応答からのオブジェクトの配列）、コンソールはエラーをスローします：

Uncaught TypeError: Unable to process binding "text: function(){return citiesSelected().name }" Message: Cannot read property 'name' of undefined

div内のプロパティを使用していません。データバインドには値が表示されますが、テキストが必要です。

私はノックアウトでかなり新しいので、多分初心者のミスを犯しているかもしれませんが、私はあなたの助けをたくさん感謝します。

Answer 1

あなたは以下を削除すると、それが動作します：

optionsValue:'id' 

あなたがoptionsValue属性を設定すると、あなたが選択した都市のIDに等しいselectedCitiesを設定するためにノックアウトを語っています。そのため、nameプロパティが存在しないことを示すエラーが表示されます。本質的に存在しないselectedCities.id.nameにバインドしようとしていました。 optionsValue属性を削除することにより、選択した都市オブジェクト全体を取得し、バインディングによってnameプロパティが期待どおりに評価されます。フィドルの作業

：https://jsfiddle.net/dw1284/dqzb3zwn/1/