Fortsetzung mit den Dropdown-Boxen Probleme

Question

Ich habe immer noch Probleme mit meiner Cascading wählt vor allem mit der Option Caption.

Wenn ich wählen Sie die ‚Wählen Sie ein Poster‘ Option in der übergeordneten wählen dann bekomme ich diesen Fehler:

Microsoft JScript-Laufzeitfehler: Kann nicht Bindungen analysieren. Nachricht: TypeError: Wert der Eigenschaft 'ClientSite' konnte nicht abgerufen werden: Objekt ist null oder undefiniert; Bindungen Wert: Optionen: enter code here selectedPoster() ClientSite, optionsText. 'Client', optionsCaption: select2OptionsCaption(), Wert: selectedClient, deaktivieren: (selectedPoster() ClientSite == undefined).

Ich würde schätzen, wenn jemand mir helfen könnte, es zu reparieren.

Prost C

enter code here

var objPoster1 = new Dockethub.Services.PosterDdl(); 
    objPoster1.SiteId = -1; 
    objPoster1.SiteName = ""; 

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

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

         { SiteId: 3, 
          SiteName: "Bank", 
          ClientSite: 
           [{}] 
        }   
    ]); 

    //var posterArray = ([]); 
    //var posterArray = ([{ SiteId: 1, SiteName: "Royal Mail" }, { SiteId: 2, SiteName: "DSAC"}]); 
    //var posterArray = ([{ SiteId: 1, SiteName: "Royal Mail", ClientSite:[{}] }]); 
    //posterArray.push(objPoster1); 

    // VIEW MODEL START 
        var ViewModel = function() { 
         var self = this; 


         // Poster 
         self.PosterList = ko.observableArray([]); 
         ko.mapping.fromJS(posterArray, null, self.PosterList); 


         self.selectedPoster = ko.observable(null); 
         self.selectedClient = ko.observable(null); 


         self.select1OptionsCaption = ko.computed(function() { 
          if (this.PosterList().length == 0) { 
           return 'No Posters'; 
          } else { 
           return this.PosterList().length == 1 ? '' : 'Select a Poster'; 
          } 


         }, self); 


         self.select2OptionsCaption = ko.computed(function() { 
          if (this.selectedPoster() == null || ko.toJS(this.selectedPoster().ClientSite) == undefined || ko.toJS(this.selectedPoster().ClientSite)[0].ClientName == null) { 
           return 'No Clients'; 
          } 
          else { 
           if (this.selectedPoster() != null && ko.toJS(this.selectedPoster().ClientSite).length > 1) { 
            return 'Select a client'; 
           } 
           else if (this.selectedPoster() != null && ko.toJS(this.selectedPoster().ClientSite).length == 1) { 
            return ''; 
           } 
           else if (this.selectedPoster() != null && ko.toJS(this.selectedPoster().ClientSite).length == 0) { 
            return 'No Clients'; 
           } 
          } 
         }, self); 


        }; // END VIEW MODEL 

    var viewModel = new ViewModel(); 

    $(function() { 

     ko.applyBindings(viewModel); 


     // remove if statement if you wish to display the select tag event if selectedPoster is null 
    }); 

</script> 
<fieldset class="SearchFilter"> 
    <legend>Search Filter</legend> 
    <div class="SearchItem"> 
     <span>Poster:</span> 




     <select id="Select1" data-bind="options: PosterList, optionsText: 'SiteName', value: selectedPoster, disable:PosterList().length <= 1, optionsCaption:select1OptionsCaption()" ></select> 
     <!-- ko if: selectedPoster --> 
     <select id="Select2" data-bind="options: selectedPoster().ClientSite, optionsText: 'ClientName', optionsCaption:select2OptionsCaption(), value: selectedClient, disable: (selectedPoster().ClientSite==undefined) "></select> 
     <!-- /ko --> 



     <%--<select id="Select1" data-bind="options: PosterList, optionsText: 'SiteName', value: selectedPoster, disable:PosterList().length <= 1, optionsCaption:select1OptionsCaption" ></select> 
     <select id="Select2" data-bind="options: selectedPoster().ClientSite, optionsText: 'ClientName', value: selectedClient"></select> --%> 

     <%--<select id="Select1" data-bind="options: PosterList, optionsText: 'SiteName', value: selectedPoster, disable:PosterList().length <= 1, optionsCaption: (PosterList().length==0)?'No Posters':(PosterList().length==1)?'':'Select a Poster'" ></select> 
     <select id="Select2" data-bind="options: selectedPoster().ClientSite, optionsText: 'ClientName', value: selectedClient, disable:(selectedPoster().ClientSite==undefined), optionsCaption: (selectedPoster()==undefined)? 'No Clients': ''"></select>--%> 


     <%-- <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> 
<input type="button" value="Click me!" onclick="alert(viewModel.selectedPoster().ClientSite())" /> 

Answer 1

Dies, das Problem zu replizieren erscheint:

http://jsfiddle.net/7bZT2/

Sie sind attemping this.selectedPoster() zu lesen, wenn selectedPoster()undefined ist statt null

dies behebt Ihr erstes Problem

http://jsfiddle.net/sV4Vc/

, die ein Problem mit den

<input type="button" value="Click me!" onclick="alert(viewModel.selectedPoster().ClientSite())" /> 

http://jsfiddle.net/sV4Vc/1/

Werk verlässt, obwohl m aybe nicht in der Art, wie Sie wollen, es zeigt, wie man zu dem kommt, was man will.