Uncaught ReferenceError: Unable to process binding with KnockoutJS

Question

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

Page2 有一个允许用户添加课程的按钮，当他们单击该按钮时，foreach 循环中页面中会显示几个字段，其中一个字段应 show/hide 基于在上一页所做的选择。但是上面的逻辑会抛出类似 Uncaught ReferenceError: Unable to process binding "visible:" 的错误，下面是 viewmodel

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

Answer 1

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

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

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

Answer 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>

Uncaught ReferenceError: Unable to process binding with KnockoutJS

Uncaught ReferenceError: Unable to process binding with KnockoutJS

javascript

razor

knockout.js

viewmodel