複雑なjsonオブジェクトとノックアウトバインディングを使用した親/子ドロップダウンリストの作成

Question

サイト用のサイトとクライアントを持つjsonオブジェクトがあります。 1つのサイト には多くのクライアントを置くことができます。

私は ノックアウトバインディングを使用して、サイトのドロップダウンリストボックス（親）にデータを入れる方法を知っています。しかし、親の ドロップダウンリストでonchangeが発生したときに、 クライアントのドロップダウンリスト（子）をどのように配置するかわかりません。

私は、下のコード を変更して、マスター/子のドロップダウンリスト の達成方法を私に教えていただければ幸いです。

乾杯

C

var posterArray = ([ 
          { SiteId: 1, 
          SiteName: "Mail", 
          ClientSite:[ 
           { ClientId: 1, ClientName: "Mail Client A" }, { ClientId: 1, ClientName: "Mail Client B"}] 
          }, 

          { SiteId: 2, 
          SiteName: "DSAC", 
          ClientSite: 
           { ClientId: 1, ClientName: "DSAC Client A" } 
          } 
    ]); 


    var ViewModel = function() { 
     var self = this; 

     // Poster 
     self.PosterList = ko.mapping.fromJS([]); 
     self.PosterListEnable = false; 

     self.refreshPosterList = function() { 
      var data = []; 
      if (posterArray.length == 0) { 
       data = [{ SiteId: 'No Posters', SiteName: 'No Posters'}]; 
      } else if (posterArray.length == 1) { 
       data = posterArray; 
      } else { 
       data = [{ SiteId: 'Select a Poster', SiteName: 'Select a Poster'}]; 
       data.push.apply(data, posterArray); 
      } 

      ko.mapping.fromJS(data, null, self.PosterList); 
      self.refreshClientList(); 
     }; 


     //Client 
     self.ClientList = ko.mapping.fromJS([]); 
     self.refreshClientList = function() { 

     }; 

    }; 

    var viewModel = new ViewModel(); 

    $(function() { 

     ko.applyBindings(viewModel); 
     viewModel.refreshPosterList(); 
    }); 

</script> 
<fieldset class="SearchFilter"> 
    <legend>Search Filter</legend> 
    <div class="SearchItem"> 
     <span>Poster:</span> 
     <select id="dllPoster" data-bind="foreach: PosterList, disable:PosterList().length <= 1" onchange="viewModel.refreshClientList();"> 
      <option data-bind="text: SiteName, attr:{value:SiteId}"></option> 
     </select> 
     <select id="ddlClient" data-bind="with: PosterList.ClientSite "> 
      <option data-bind="text: ClientName, attr:{value:ClientId}"></option> 
     </select> 
    </div> 
</fieldset> 

Answer 1

ノックアウトは、ドロップダウンリストのための特異的結合を有します。 「オプション」は、結合を見てください：http://knockoutjs.com/documentation/options-binding.html

ここではあなたの例のjsFiddleです：http://jsfiddle.net/9QVw9/