如何從淘汰賽JS模板中管理孩子選擇元素

Question

我有以下情形，我從服務器使用ko.mapping得到一些數據，它是在形式翻譯：

var viewModel = { 
    name: "Abc", 
    educations: [{ course: "C1", countryID: 1, cityID = 2}, 
       { course: "C2", countryID: 2, cityID = 3}] 
} 

我也有2個數組變量，它們是：

var countries = [{id=1,name="UAE"},{id=2,name="USA"},]; 
var cities = [{id=1,name="Dubai", cid=1},{id=2,name="Al-Ain", cid=1}, 
       {id=3,name="Newyork", cid=2},{id=4,name="Houston", cid=2},]; 

現在來顯示/編輯該數據我有以下HTML

<div> 
    <input type="text" data-bind="value: Name"/> 
    <table data-bind="template: { name: 'cet', foreach: educations }"> 
    </table> 
</div> 
<script type="text/html" id="cet"> 
    <tr> 
     <td> 
      <select data-bind="options: countries, optionsText: 'name', optionsValue: 'id', optionsCaption: 'Select...', value: countryID"></select> 
     </td> 
     <td> 
      <select data-bind="options: cities, optionsText: 'name', optionsValue: 'id', optionsCaption: 'Select...', value: cityID"></select> 
     </td> 
    </tr> 
</script> 

現在我需要的是，當從服務器發送數據時，選擇框應顯示與綁定對象相對應的正確項目。

Answer 1

好的解決了這個問題:)

數據綁定應做如下：

<select id="Countries" name="Countries" data-bind="options: countries, optionsText: 'CountryName', optionsValue: 'CountryID', optionsCaption: 'Select...', value: SelectedCountryID"></select> 
<select id="Cities" name="Cities" data-bind="options: Cities, optionsText: 'CityName', optionsValue: 'CityID', optionsCaption: 'Select...', value: CityID"></select> 

首先，我得跑ko.mapping到視圖模型轉換到「Observable viewModel」，那麼代碼將如下所示：

if(viewModel.educations() != undefined && viewModel.educations().length > 0) { 
    for(k in viewModel.educations()) { 
     var education = viewModel.educations()[k]; 

     education.Cities = ko.observableArray(); 
     education.SelectedCountryID = ko.computed({ 
      read: function() { 
       return(this.CountryID()); 
      }, 
      write: function(value) { 
       this.CountryID(value); 
       this.Cities.removeAll(); 

       if(value != undefined) { 
        for(c in cities) { 
         if(cities[c].cid == value) { 
          this.Cities.push(cities[c]); 
         } 
        } 
       } 
      }, 
      owner: education, 
     }); 

     if(viewModel.educations()[k].CountryID() != 0 || 
      viewModel.educations()[k].CountryID() != undefined) { 
      viewModel.educations()[k].SelectedCountryID(viewModel.educations()[k].CountryID()); 
     } 
    } 
} 

Answer 2

您幾乎達到了您的目標 - here是您的代碼的工作版本。

var viewModel = { 
    name: "Abc", 
    educations: [{course: "C1", countryID: 1, cityID: 2}, 
       {course: "C2", countryID: 2, cityID: 3}], 
    countries: [{id: 1, name: "UAE"}, {id: 2, name: "USA"}], 
    cities: [{id: 1, name: "Dubai", cid: 1}, 
      {id: 2, name: "Al-Ain", cid: 1}, 
      {id: 3, name: "Newyork", cid: 2}, 
      {id: 4, name: "Houston", cid: 2}] 
}; 

ko.applyBindings(viewModel); 

<div> 
    <input type="text" data-bind="value: name" /> 
    <table data-bind="template: { name: 'cet', foreach: educations }"></table> 
</div> 
<script type="text/html" id="cet"> 
    <tr> 
     <td> 
      <select data-bind="options: $root.countries, optionsText: 'name', optionsValue: 'id', optionsCaption: 'Select...', value: countryID"></select> 
     </td> 
     <td> 
      <select data-bind="options: $root.cities, optionsText: 'name', optionsValue: 'id', optionsCaption: 'Select...', value: cityID"></select> 
     </td> 
    </tr> 
</script>