Ich habe ein JSON-Array, das Elemente in einer foreach-Datenbank erstellt hat. Dann behalte ich das ausgewählte Objekt in diesem Array, so dass ich unabhängige Schaltflächen "Änderungen speichern" für jedes Objekt in diesem Array haben kann. All das funktioniert (primarycontactname zum Beispiel) mit Ausnahme der Bindung für die Checkboxen.Knockout foreach Array Checkboxen werden nicht visuell aktualisiert
<div class="container span8" data-bind="foreach: locationssubscribed">
<div class="well span3" data-bind="click: $parent.selectedLocationSubscribed">
<input type="text" class="span3" data-bind="value: primarycontactname" placeholder="Contact Name.." />
<br />
<div class="checkbox" data-bind="visible: (vendorbringinggifts() === 0 || vendorbringinggifts() === vendorid())">
<input id="chkGiftsAreBeingBrought" type="checkbox" data-bind="checked: giftsarebeingbrought" />
</div>
<button data-bind="click: $root.saveVendorToLocation, enable: needsave, text: needsave() ? 'Save Location Changes' : 'No Changes to Save', css: { 'btn-primary': needsave }" class="btn">Save Location Changes</button>
</div>
</div
Das Kontrollkästchen Last auf dem giftsarebeingbrought beobachtbaren in jedem Array-Objekt automatisch korrekt, aber wenn Sie das Kontrollkästchen die Sichtkontrolle wechselt nicht klicken. Mit Hilfe des Debuggers kann ich sehen, dass die beobachtbaren Geschenke im ursprünglichen Array und im selectedLocationSubscribed auf den ersten Klick umgeschaltet werden, aber nicht bei nachfolgenden Klicks wieder umschalten und das visuelle Kontrollkästchen ändert sich nach der ersten Bindung nie.
{
"locationssubscribed": [
{
"vendortolocationid": 10,
"primarycontactname": "Fake Name1",
"vendorbringinggifts": 0,
"giftsarebeingbrought": false,
"needsave": false
},
{
"vendortolocationid": 11,
"primarycontactname": "Fake Name2",
"vendorbringinggifts": 0,
"giftsarebeingbrought": false,
"needsave": false
},
{
"vendortolocationid": 12,
"primarycontactname": "Fake Name3",
"vendorbringinggifts": 0,
"giftsarebeingbrought": false,
"needsave": false
},
{
"vendortolocationid": 13,
"primarycontactname": "Fake Name4",
"vendorbringinggifts": 0,
"giftsarebeingbrought": false,
"needsave": false
}
],
"selectedLocationSubscribed": {
"vendortolocationid": 12,
"primarycontactname": "Fake Name1",
"vendorbringinggifts": 0,
"giftsarebeingbrought": true,
"needsave": true
}
}
function VendorToLocation(vtl) {
this.vendortolocationid = ko.observable(vtl.VendorToLocationID);
this.primarycontactname = ko.observable(vtl.PrimaryContactName);
this.vendorbringinggifts = ko.observable(vtl.VendorBringingGifts);
this.giftsarebeingbrought = ko.observable(vtl.GiftsAreBeingBrought);
this.needsave = ko.observable(false);
}
function VendorViewModel() {
var self = this;
self.locationssubscribed = ko.observableArray();
self.selectedLocationSubscribed = ko.observable();
self.selectedLocationSubscribed.subscribe(function (ftl) {
if (ftl !== null) {
ftl.needsave(true);
}
});
self.getLocationsAvailable = function (vendorID) {
self.locationsavailable.removeAll();
$.ajax($("#GetLocationsAvailableUrl").val(), {
data: '{ "vendorID":' + vendorID + '}',
async: false,
success: function (allData) {
self.locationsavailable($.map(allData, function (item) { return new LocationsAvailable(item) }));
}
});
}
self.getLocationSubscription = function (vendorID) {
self.locationssubscribed.removeAll();
$.ajax($("#GetLocationSubscriptionUrl").val(), {
data: '{ "vendorID":' + vendorID + '}',
success: function (allData) {
self.locationssubscribed($.map(allData, function (item) { return new VendorToLocation(item) }));
}
});
}
self.saveVendorToLocation = function() {
var url = $("#updateVendorToLocationUrl").val();
var vendorid = self.selectedVendor().vendorid();
var selectedLoc = self.selectedLocationSubscribed();
$.ajax(url, {
data: '{ "vtl" : ' + ko.toJSON(selectedLoc) + '}',
success: function (result) {
if (result === false) {
toastr.error("ERROR!: Either you or a competing vendor has chosen this location since you last loaded the webpage. Please refresh the page.");
} else {
toastr.success("Vendor to location details saved");
selectedLoc.vendortolocationid(result.VendorToLocationID);
self.updateVendorView(); // added 170307 1030 to get vendor contact details to update automatically
self.getActionLog(vendorid);
selectedLoc.needsave(false);
}
}
});
};
}
$(document).ready(function() {
var myViewModel = new VendorViewModel();
ko.applyBindings(myViewModel);
myViewModel.updateVendorView();
myViewModel.getLocationSubscription(curVendorID);
}
Das Ziel ist es, das Kontrollkästchen richtig zu funktionieren. Der Rest der Textbox-basierten Bindungen, die ich entfernt habe, um den Beitrag zu verdichten, funktioniert seit Jahren richtig. Ich bin jetzt ratlos, was ich falsch mache mit der Textbox.
Ok, also habe ich, wenn ich „klicken: $ parent.selectedLocationSubscribed“ entfernen heraus das Symptom verschwindet aber, dass erkennbar ist, wie ich etwas isDirty Stil tat Verfolgen des Objekts, sodass ich weiß, ob das Panel/Objekt dem Benutzer erlauben muss, seine Änderungen zu speichern. Haben Sie Ideen, wie Sie die geprüfte Bindung an das Element erneut anwenden können? – Chris