繼續下拉框問題

Question

我仍然有我的級聯選擇問題，特別是與optionsCaption。

如果我選擇在父「選擇一個海報」選項選中，然後我得到這個錯誤：

微軟JScript運行時錯誤：無法解析綁定。 消息：TypeError：無法獲取屬性'ClientSite'的值： object is null or undefined; 綁定值：選擇：enter code here selectedPoster（）ClientSite，optionsText： 'CLIENTNAME'，optionsCaption：select2OptionsCaption（），值： selectedClient，禁用：（selectedPoster（）== ClientSite未定義。）

我將不勝感激如果有人能幫我解決它。

乾杯 Ç

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/

你正在嘗試讀取this.selectedPoster()時selectedPoster()是undefined，而不是null

這個修復您的第一個問題

http://jsfiddle.net/sV4Vc/

留下一個問題與

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

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

作品雖然米aybe不是你想要的樣子，它展示瞭如何去達到你想要的任何東西。