CODEWITHSUNDEEP
javascriptrazorknockout.jsviewmodel
user4912134
user4912134

Reputation: 1043

Uncaught ReferenceError: Unable to process binding with KnockoutJS

We have a multiple page form like below , each page on the form is associated with different model classes. I am trying use the value the users selected in Page 1 and based upon that value selected in Pg1 I need to show/hide the field in Page2.

Page2 has a button which allows the users add courses, when they click on the button few fields shows up in the page in foreach loop and one of the field should show/hide based on the selection made on the previous page. But the above logic throws error like Uncaught ReferenceError: Unable to process binding "visible:" below is the viewmodel

How can I have the binding work properly here and get rid of the error

Upvotes: 0

Views: 3904

Answers (2)

Brother Woodrow
Brother Woodrow

Reputation: 6372

It's case sensitive. Also, the foreach loop changes the binding context, so you need to do this:

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

Edit- that is, if you're indeed trying to reference the Solution property from the parent viewmodel. It's not clear from your example wheter a CoursesList item also has such a property.

Upvotes: 2

Nathan Fisher
Nathan Fisher

Reputation: 7941

Just expanding on @Brother Woodrow's answer with an very basic runnable example might help with things.

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>

Upvotes: 1

Related Questions