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列吗？如果是这样，请将其作为字符串传递。现在你传递一个根本不存在的属性。