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的observable被设置为false它被隐藏了。在那种情况下，为什么模板仍然显示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

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

Knockout根据下拉选择更改模板

1 个答案: