所选选项未通过淘汰更新

Question

I can't make the ImageType(name) update when the select is changed and the data has already been created (obtained from the model), only when a new element is created I can see that when I change the select the ImageType(name) is updated ), why would this happen?

I tried with change event (knockout) but without results

 function PatientInsuranceCarrierImage(plainInsuranceImage) { var self = this; self.ImageTypes = ko.observableArray(plainInsuranceImage.ImageTypes); self.ImageType = ko.observable(plainInsuranceImage.ImageType); } function PatientInsuranceCarrierImageViewModel(items) { var self = this; self.PatientInsuranceCarrierImages = ko.observableArray(items); var innerImageTypes = JSON.parse('[{\"ID\":\"BackImage\",\"Name\":\"Back Image\"},{\"ID\":\"FrontImage\",\"Name\":\"Front Image\"},{\"ID\":\"Other\",\"Name\":\"Other\"}]'); const newPatientInsuranceCarrierImage = { ImageType: "Other", ImageTypes: [], }; for (let i = 0; i < innerImageTypes.length; i++) { newPatientInsuranceCarrierImage.ImageTypes.push(innerImageTypes[i]); } // Operations self.addpatientInsuranceCarrierImage = function() { self.PatientInsuranceCarrierImages.push(new PatientInsuranceCarrierImage(newPatientInsuranceCarrierImage)); } } var plainImages = JSON.parse('[{\"ImageType\":\"Other\",\"ImageTypes\":[{\"ID\":\"BackImage\",\"Name\":\"Back Image\"},{\"ID\":\"FrontImage\",\"Name\":\"Front Image\"},{\"ID\":\"Other\",\"Name\":\"Other\"}]},{\"ImageType\":\"Other\",\"ImageTypes\":[{\"ID\":\"BackImage\",\"Name\":\"Back Image\"},{\"ID\":\"FrontImage\",\"Name\":\"Front Image\"},{\"ID\":\"Other\",\"Name\":\"Other\"}]},{\"ImageType\":\"Other\",\"ImageTypes\":[{\"ID\":\"BackImage\",\"Name\":\"Back Image\"},{\"ID\":\"FrontImage\",\"Name\":\"Front Image\"},{\"ID\":\"Other\",\"Name\":\"Other\"}]},{\"ImageType\":\"Other\",\"ImageTypes\":[{\"ID\":\"BackImage\",\"Name\":\"Back Image\"},{\"ID\":\"FrontImage\",\"Name\":\"Front Image\"},{\"ID\":\"Other\",\"Name\":\"Other\"}]}]'); var patientInsuranceCarrierImagesViewModel = new PatientInsuranceCarrierImageViewModel(plainImages); ko.applyBindings(patientInsuranceCarrierImagesViewModel);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="float: right; vertical-align: top; padding-bottom: 5px;"> <a data-bind="click: addpatientInsuranceCarrierImage" href="#" class="button">Add New Image</a> </div> <table id="patientInsuranceImages" style="width: 100%;" class="alt1"> <thead> <tr> <th class="Table_Top" style="width: 80px;"> Back/Front </th> </tr> </thead> <!-- ko if: PatientInsuranceCarrierImages().length > 0 --> <tbody data-bind="foreach: PatientInsuranceCarrierImages"> <tr> <td> <select data-bind="options: ImageTypes, value: ImageType, optionsValue: 'ID', optionsText:'Name'" class="txtinput" style="margin-top: 0px;"> </select> <input type="hidden" data-bind="value: ImageType, attr: {name: 'images[' + $index() + '].ImageType'}" /> <span data-bind="text: ImageType"></span> </td> </tr> </tbody> <!-- /ko --> </table>

Answer 1

It is because of this line:

self.PatientInsuranceCarrierImages = ko.observableArray(items);

You are just putting array of items into observable array. That way your ImageType property in each item is not observable so Knockout does not track changes of it. To fix this you need to map that items into collection of your defined objects at the top of your code snippet:

self.PatientInsuranceCarrierImages = ko.observableArray(items.map(i => new PatientInsuranceCarrierImage(i)));

 function PatientInsuranceCarrierImage(plainInsuranceImage) { var self = this; self.ImageTypes = ko.observableArray(plainInsuranceImage.ImageTypes); self.ImageType = ko.observable(plainInsuranceImage.ImageType); } function PatientInsuranceCarrierImageViewModel(items) { var self = this; self.PatientInsuranceCarrierImages = ko.observableArray(items.map(i => new PatientInsuranceCarrierImage(i))); var innerImageTypes = JSON.parse('[{\"ID\":\"BackImage\",\"Name\":\"Back Image\"},{\"ID\":\"FrontImage\",\"Name\":\"Front Image\"},{\"ID\":\"Other\",\"Name\":\"Other\"}]'); const newPatientInsuranceCarrierImage = { ImageType: "Other", ImageTypes: [], }; for (let i = 0; i < innerImageTypes.length; i++) { newPatientInsuranceCarrierImage.ImageTypes.push(innerImageTypes[i]); } // Operations self.addpatientInsuranceCarrierImage = function() { self.PatientInsuranceCarrierImages.push(new PatientInsuranceCarrierImage(newPatientInsuranceCarrierImage)); } } var plainImages = JSON.parse('[{\"ImageType\":\"Other\",\"ImageTypes\":[{\"ID\":\"BackImage\",\"Name\":\"Back Image\"},{\"ID\":\"FrontImage\",\"Name\":\"Front Image\"},{\"ID\":\"Other\",\"Name\":\"Other\"}]},{\"ImageType\":\"Other\",\"ImageTypes\":[{\"ID\":\"BackImage\",\"Name\":\"Back Image\"},{\"ID\":\"FrontImage\",\"Name\":\"Front Image\"},{\"ID\":\"Other\",\"Name\":\"Other\"}]},{\"ImageType\":\"Other\",\"ImageTypes\":[{\"ID\":\"BackImage\",\"Name\":\"Back Image\"},{\"ID\":\"FrontImage\",\"Name\":\"Front Image\"},{\"ID\":\"Other\",\"Name\":\"Other\"}]},{\"ImageType\":\"Other\",\"ImageTypes\":[{\"ID\":\"BackImage\",\"Name\":\"Back Image\"},{\"ID\":\"FrontImage\",\"Name\":\"Front Image\"},{\"ID\":\"Other\",\"Name\":\"Other\"}]}]'); var patientInsuranceCarrierImagesViewModel = new PatientInsuranceCarrierImageViewModel(plainImages); ko.applyBindings(patientInsuranceCarrierImagesViewModel);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="float: right; vertical-align: top; padding-bottom: 5px;"> <a data-bind="click: addpatientInsuranceCarrierImage" href="#" class="button">Add New Image</a> </div> <table id="patientInsuranceImages" style="width: 100%;" class="alt1"> <thead> <tr> <th class="Table_Top" style="width: 80px;"> Back/Front </th> </tr> </thead> <!-- ko if: PatientInsuranceCarrierImages().length > 0 --> <tbody data-bind="foreach: PatientInsuranceCarrierImages"> <tr> <td> <select data-bind="options: ImageTypes, value: ImageType, optionsValue: 'ID', optionsText:'Name'" class="txtinput" style="margin-top: 0px;"> </select> <input type="hidden" data-bind="value: ImageType, attr: {name: 'images[' + $index() + '].ImageType'}" /> <span data-bind="text: ImageType"></span> </td> </tr> </tbody> <!-- /ko --> </table>