Knockout根據下拉選擇更改模板

Question

我試圖根據下拉選擇更改標題和模板，然後單擊搜索按鈕。既然有很多行代碼，我就把所有必要的東西放在一起。我得到這個錯誤LastCPRDate is not defined。以下是完整的錯誤消息的更多詳細信息。

代碼

vmSearchDetailsModel = function() { 

    var self = this; 
    self.SearchResults = ko.observableArray([]); // Populate the Search Results 

    self.Partners = ko.observableArray([]); // Populate the Partners 
    self.selectedPartner = ko.observable("0"); 

    self.Filters = ko.observableArray([]); // Populate the Filters 
    self.selectedFilter = ko.observable("0"); // not using this show/hide 

    self.ShowAData = ko.observable(false); 
    self.ShowBData= ko.observable(false); 
    self.ShowCData= ko.observable(false); 

    self.GetSearchDetails = function (data) { 

     $.ajax({ 
      type: 'POST', 
      url: 'some url', 
      dataType: 'json', 
      data: {"PartnerID": self.selectedPartner }, 
      success: function (result) { 
       if (result.ErrorMsg == "") { 
        ko.mapping.fromJSON(result.data, {}, self.SearchResults); 
        var selPartner = $("#ReportType").val(); 
        console.log(selPartner) // the first time I get the selected valuer here. 

        if(selPartner=="1") // show the the header and template of the first and hid the others 
        { 
         //Show A Data 
         self.ShowAData(true); 
         self.ShowBData(false); 
         self.ShowCData(false); 
         console.log(self.ShowAData()); //shows true 
        } 
        if(selPartner=="2") 
        { 
         //Show B Data 
         self.ShowAData(false); 
         self.ShowBData(true); 
         self.ShowCData(false); 
         console.log(self.ShowBData()); 
        } 

        if(selPartner=="3") 
        { 
         //Show C Data 
         self.ShowAData(false); 
         self.ShowBData(false); 
         self.ShowCData(true); 
         console.log(self.ShowCData()); 
        } 

       } else { 

        self.ClearData(); // just clears the data 
       } 

      }, 
      error: function (xhr, ajaxOptions, thrownError) { 
       self.ClearData(); 
      } 
      }); 
     } 
} 

綁定

$(document).ready(function() { 
    objvmSearchDetails = new vmSearchDetailsModel() 
    ko.applyBindings(objvmSearchDetails, $("#GridContent")[0]); 
    objvmSearchDetails.GetReportTypes(); 
}); 

HTML頭

這裏基礎上，下拉頭的變化。 LastCPR僅在第二個和第三個下拉列表中可用。 Gridsort是自定義綁定

第一次當我選擇一個下拉菜單並單擊搜索按鈕時，數據和標題顯示正確。再次將下拉菜單更改爲第二個選項，然後單擊搜索它是正確的。當我將下拉菜單更改爲首選項時，標題將隱藏而不是數據。

爲什麼標題被隱藏。我假設自從A的可觀察性被設定爲假，它就會被隱藏起來。那麼爲什麼模板仍然顯示B的數據。 （下面的模板代碼）。

所以我試着點擊搜索按鈕來查看A的數據是否會出現，但我得到了下面的錯誤。 TextualEditBinding is another custom binding。 LastCPR屬於B的數據。我在這裏做錯了什麼？

Uncaught ReferenceError: Unable to process binding "if: function(){return (objvmSearchDetails.ShowBData()==true) }" Message: Unable to process binding "textualEditDate: function(){return LastCPRDate }" Message: LastCPRDate is not defined

<!-- ko if: (objvmSearchDetails.ShowAData()==true) --> 
<div style="display: none" class="grid_ccf_Lay_title" data-bind="visible:SearchResults().length>0"> 
<div> 
    <div > 
       <a data-bind="GridSort:'SearchResults.ClientID'">Child ID</a></div> 
    </div> 
    <div> 
     <div > 
       <a data-bind="GridSort:'SearchResults.InterActionDesc'">Interaction Desc</a></div> 
     </div> 
</div> 
<!-- /ko --> 

<!-- ko if: (objvmSearchDetails.ShowBData()==true) --> 
<div style="display: none" class="grid_ccf_Lay_title" data-bind="visible:SearchResults().length>0"> 
<div> 
    <div > 
       <a data-bind="GridSort:'SearchResults.ClientID'">Child ID</a></div> 
    </div> 
    <div> 
     <div > 
      <a data-bind="GridSort:'SearchResults.LastCPRDate'">Last CPR</a></div> 
     </div> 
</div> 
<!-- /ko --> 

<!-- ko if: (objvmSearchDetails.ShowCData()==true) --> 
<div style="display: none" class="grid_ccf_Lay_title" data-bind="visible:SearchResults().length>0"> 
<div> 
    <div > 
       <a data-bind="GridSort:'SearchResults.ClientID'">Child ID</a></div> 
    </div> 
    <div> 
     <div > 
      <a data-bind="GridSort:'SearchResults.LastCPRDate'">Last CPR</a></div> 
     </div> 
</div> 
<!-- /ko --> 

** **模板

<script type="text/html" id="TmplSearchResults"> 
    <!-- ko if: (ShowAData()==true) --> 
      <!-- Lay --> 
      <div> 
       <div data-bind="text: ClientID"> 
        </div> 
      </div> 
      <div > 
       <div data-bind="textualEditDate: CorrespondenceDate"> 

       </div> 
      </div> 
      <!-- /ko --> 


    <!-- ko if: (ShowBData()==true) --> 
      <!-- Lay --> 
      <div> 
       <div data-bind="text: ClientID"> 
        </div> 
      </div> 
      <div > 
       <div data-bind="textualEditDate: LastCPR"> 

       </div> 
      </div> 
      <!-- /ko --> 


    <!-- ko if: (ShowCData()==true) --> 
      <!-- Lay --> 
      <div> 
       <div data-bind="text: ClientID"> 
        </div> 
      </div> 
      <div > 
       <div data-bind="textualEditDate: LastCPR"> 

       </div> 
      </div> 
      <!-- /ko --> 
</script> 

更新1

我有textualEditDate這又是另一種自定義綁定，只是發生在MM-日期DD-YYYY格式並使用momentjs將其轉換爲DD-MMM-YYYY格式

更新2

我被映射之前清除observableArray也if語句後移動映射擺脫錯誤的。我認爲這不是正確的方法。任何建議將是有益的

更改代碼

self.SearchResults([])清除observablearray

後，如果塊ko.mapping.fromJSON(result.data, {}, self.SearchResults);這樣

self.SearchResults([]); 

if(selPartner=="1") // show the the header and template of the first and hid the others 
{ 
    .... 
} 
'''' 
'''' 
ko.mapping.fromJSON(result.data, {}, self.SearchResults); 

現在我需要找出如何停止頭遷此從我將下拉菜單更改爲原始選項後清除

Answer 1

SearchResults是一個observableArray。所以SearchResults.LastCPRDate是未定義的，因爲observableArray沒有該屬性，而我懷疑數組中的單個項目具有該屬性。

GridSort想要什麼作爲參數？它可能是NAME列嗎？如果是這樣，請將其作爲字符串傳遞。現在你傳遞一個根本不存在的屬性。