未捕获的 ReferenceError：无法处理与 KnockoutJS 的绑定答案

【问题标题】：Uncaught ReferenceError: Unable to process binding with KnockoutJS未捕获的 ReferenceError：无法处理与 KnockoutJS 的绑定
【发布时间】：2022-01-15 10:08:07
【问题描述】：

我们有一个像下面这样的多页表单，表单上的每个页面都与不同的模型类相关联。我正在尝试使用用户在第 1 页中选择的值，并根据在 Pg1 中选择的值，我需要在第 2 页中显示/隐藏该字段。

Page2 有一个允许用户添加课程的按钮，当他们单击该按钮时，页面中会在foreach 循环中显示几个字段，并且其中一个字段应根据上一页上的选择显示/隐藏.但是上面的逻辑会抛出像Uncaught ReferenceError: Unable to process binding "visible:"这样的错误，下面是viewmodel

我怎样才能让绑定在这里正常工作并摆脱错误

【问题讨论】：

标签： javascript razor knockout.js viewmodel

【解决方案1】：

区分大小写。此外，foreach 循环会更改绑定上下文，因此您需要这样做：

<div class="form-group required" data-bind="visible: $parent.Solution() == 'Other'">

编辑——也就是说，如果您确实试图从父视图模型中引用 Solution 属性。从您的示例中不清楚 CoursesList 项目是否也具有这样的属性。

【讨论】：

我仍然得到相同的错误 knockout-3.5.1.js:79 Uncaught TypeError: Unable to process binding "visible: function(){return Solution() =='Other' }"跨度>
你认为它与 foreach 循环有关吗
我尝试在此处向stackoverflow.com/questions/70316106/… 问题添加更多信息，如果您能告诉我我错过了什么，那就太好了
天啊！我完全错过了有一个 foreach 循环。是的，它改变了绑定上下文，所以你需要在Solution 前面加上$parent。见：knockoutjs.com/documentation/foreach-binding.html
谢谢！！！但我仍然收到错误Uncaught ReferenceError: Unable to process binding "visible: function(){return ($parent.solution() =='Other') }" Message: $parent is not defined at visible (eval at parseBindingsString 我做了<div class="form-group required" data-bind="visible: ($parent.solution() == 'Other')"

【解决方案2】：

只是用一个非常基本的可运行示例扩展@Brother Woodrow 的答案可能会有所帮助。

function ViewModel() {
  var self = this;
  self.pages = [1, 2]
  self.currentPage = ko.observable(1)
  self.solutions = ko.observableArray(['Solution 1', 'Solutions 2', 'Other']);
  self.solution = ko.observable().extend({
    required: {
      params: true,
      message: "Required"
    }
  });
  self.next = function() {
    self.currentPage(self.currentPage() + 1);
  };
  self.back = function() {
    self.currentPage(self.currentPage() - 1);
  };
  self.CourseDetails = ko.observableArray();

  self.addCourse = function() {
    self.CourseDetails.push(new coursesList());
  }
  self.pageVisible = function(page) {
    return self.currentPage() == page;
  }
}

function coursesList() {
  var self = this;
  self.otherSolution = ko.observable().extend({
    required: {
      params: true,
      message: "Required"
    }
  });

}
ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div id="Page_1" data-bind="visible: pageVisible(1)">
  <h2>Page 1</h2>
  <div class="form-group required">
    <label for="Solution" class="control-label">Solution</label>
    <select id="Solution" name="Solution" class="form-control" data-bind="options: solutions, value: solution, optionsCaption: 'Select'"></select>
  </div>

  <button type="submit" id="NtPg" class="SubmitButton" data-bind="click: next">Next</button>
</div>

<div id="Page_2" data-bind="visible: pageVisible(2)">
  <h2>Page 2</h2>
  <button type="submit" id="AddCourseInfo" class="SubmitButton" data-bind="click: addCourse">Add Course Info</button>
  <div data-bind="foreach:CourseDetails">
    <div class="form-group required" data-bind="visible: $parent.solution() == 'Other'">
      <label for="OtherSolution" class="control-label">Explain Other Solution : </label>
      <input type="text" maxlength="1000" id="OtherSolution" name="OtherSolution" class="form-control" data-bind="value : otherSolution" required/>
    </div>
  </div>
  <button type="submit" id="NtPg" class="SubmitButton" data-bind="click: back">Back</button>
</div>

<pre data-bind="text: ko.toJSON($root)"></pre>

【讨论】：