Tenemos un formulario de varias páginas como el siguiente, cada página del formulario está asociada con diferentes clases de modelos. Estoy tratando de usar el valor que los usuarios seleccionaron en la página 1 y, según ese valor seleccionado en la página 1, necesito mostrar/ocultar el campo en la página 2.
La página 2 tiene un botón que permite a los usuarios agregar cursos, cuando hacen clic en el botón, aparecen pocos campos en la página en el bucle foreach y uno de los campos debe mostrarse/ocultarse según la selección realizada en la página anterior. Pero la lógica anterior arroja un error como Uncaught ReferenceError: Unable to process binding "visible:" continuación está el viewmodel
¿Cómo puedo hacer que el enlace funcione correctamente aquí y eliminar el error?
Es sensible a mayúsculas y minúsculas. Además, el bucle foreach cambia el contexto de vinculación, por lo que debe hacer esto:
<div class="form-group required" data-bind="visible: $parent.Solution() == 'Other'">
Editar, es decir, si de hecho está tratando de hacer referencia a la propiedad Solution desde el modelo de vista principal. No está claro en su ejemplo si un elemento CoursesList también tiene dicha propiedad.
Simplemente ampliar la respuesta de @Brother Woodrow con un ejemplo ejecutable muy básico podría ayudar con las cosas.
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>