ドロップダウンボックスの問題を続ける

Question

私はまだカスケードに問題があります。特にoptionsCaptionを選択してください。

私が選択した親に「ポスターを選択」オプションを選択した場合、私はこのエラーを取得する：

のMicrosoft JScriptのランタイムエラー：バインディングを解析できません。 メッセージ：TypeError：プロパティ 'ClientSite'の値を取得できません： オブジェクトがnullまたは未定義です。 バインディング値：オプション：enter code here selectedPoster（）ClientSite、optionsText：。 'CLIENTNAME'、optionsCaption：select2OptionsCaption（）、値： selectedClient、無効にします（。selectedPoster（）ClientSite ==未定義）

私がいただければ幸いです誰かが私にそれを解決するのを助けることができたら。

乾杯 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

これは、問題を再現するために表示されます。

http://jsfiddle.net/7bZT2/

ますselectedPoster()がundefined代わりのnull

これはあなたの最初の問題

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

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

働くが持つ問題点を残し

http://jsfiddle.net/sV4Vc/

を修正するときにthis.selectedPoster()を読み取ることattempingされていますmあなたが望む方法ではない、それはあなたが望むところに到達する方法を示します。