Estoy trabajando en una aplicación web MVC con ASP.NET y Knockout js (V3.5.1). Estoy luchando con Knockout observable no actualizado cuando cambia un valor de entrada. Ambos se crean dinámicamente en Javascript. El valor inicial establecido en el observable no se refleja en la entrada cuando se crea el observable. Estoy desconcertado por qué el observable no capta el cambio de entrada.
Encuentre mi código a continuación para una demostración adicional. Realmente aprecio si hay alguna ayuda.
CustomViewModel.cs
public class CustomViewModel { public int Id { get; set; } public int Prop { get; set; } }HTML con Razor
@model CustomViewModel <div id="inputContainer"></div> @section Scripts { @Scripts.Render("~/bundles/jqueryval", "/Scripts/ViewModels/CustomFormViewModel.js") <script> var vm = new CustomFormViewModel(@HtmlHelperExtensions.HtmlConvertToJson(Html, Model)); vm.createInput = function (data) { return `@Html.Editor("Prop", new { @htmlAttributes = new { @id = "${data.Id}Prop", @data_bind = "value: ${data.Id}Prop" } })`; }; ko.applyBindings(vm); </script> }/Scripts/ViewModels/CustomFormViewModel.js código
function CustomFormViewModel(self) { var self = this; var data = loadData(); self[`${data.Id}Prop`] = ko.observable(data.Prop); var newInput = self.createInput(data); $("#inputContainer").append(newInput); };Solo me centraré en el tema en cuestión, que es la entrada.
En general, dado que está utilizando knockoutJS, debe abstenerse de usar jQuery para agregar elementos al dom, en su lugar, debe cambiar su Vista, para que refleje lo que está tratando de lograr.
Así que deberías tener algo así:
<div data-bind="if: showThisInput"> <input data-bind="value: myBindedObservable" </div>De esta manera, usted controla si la entrada debe mostrarse/representarse, en lugar de agregarla más adelante a través de jQuery.
Cuando llama a applyBindings, solo se vincula a cualquier html que ya exista en la vista. Debido a que está inyectando la entrada DESPUÉS de haber vinculado la máquina virtual a la vista, el motor no conoce el elemento, ya que no está controlado por eliminación, sino que lo agrega manualmente.
Una forma de resolver esto sería llamar a la maquinilla de afeitar dentro de la vista renderizada normalmente, de modo que cuando se ejecute applyBindings, el elemento de entrada exista en el dom
@Html.Editor("Prop", new { @htmlAttributes = new { @id = "${data.Id}Prop", @data_bind = "value: ${data.Id}Prop" } })La única otra opción sería borrar los enlaces en el elemento y volver a vincular, lo que también es una mala práctica para este caso de uso.