Erstellen von Eltern/Kind-Dropdown-Listen mit komplexen JSON-Objekt und Knockout-Bindungen

Question

Ich habe ein JSON-Objekt, das Websites und Clients für die Websites hat. Eine Seite kann viele Kunden haben.

Ich weiß, wie Sie die Site-Dropdown-Liste (Eltern) mit Knockout-Bindungen füllen. Ich kann jedoch nicht herausfinden, wie die Client-Dropdown-Liste (untergeordnet) ausgefüllt wird, wenn die Änderung in der übergeordneten Dropdown-Liste passiert.

Ich würde mich freuen, wenn jemand mit mehr Erfahrung meine Code unten ändern könnte, um mir zu zeigen, wie man die Master/Kind-Dropdown-Liste Funktionalität zu erreichen.

Prost

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

Knockout hat eine spezifische Listen für die Drop-Down-Bindung. Schauen Sie sich an den „Optionen“ Bindung: http://knockoutjs.com/documentation/options-binding.html

hier ein jsFiddle von Ihrem Beispiel ist: http://jsfiddle.net/9QVw9/