我有一个编辑表单,显示已添加/存储的项目以及删除项目的选项。 如果我单击“删除”,“保存”,则会弹出成功消息,但当我返回列表显示时,我刚刚“删除”的项目仍然存在。
这是显示项目旁边带有删除按钮的表格:
<table id="newPatientForm"> <tr> <th>First Name</th> <th>Last Name</th> <th></th> </tr> <tbody data-bind="foreach:Patients"> <tr> <td class="form-group"><input data-bind="value: FirstName, event: {change: flagPatientAsEdited}, hasfocus: true" /></td> <td class="form-group"><input data-bind="value: LastName" /></td> <td class="form-group"><button data-bind="click: $parent.deletePatient">Delete</button></td> </tr> </tbody> </table>这是我声明“PatientsToDelete”的viewModel
using OnboardingProject.Model; using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace OnboardingProject.Web.ViewModels { public class SiteViewModel : IModel { public SiteViewModel() { Patients = new List<PatientViewModel>(); PatientsToDelete = new List<int>(); } public int SiteId { get; set; } public string Name { get; set; } public string Address { get; set; } public string City { get; set; } public string State { get; set; } public string Zip { get; set; } public string CreatedOn { get; set; } public string ModifiedOn { get; set; } public ObjectState ObjectState { get; set; } public string MessageToClient { get; set; } // Message sent to client from server to demonstrate data-flow when property is not in db // @TODO: Change to client CompleteAddress public string CompleteAddress { get { return string.Format("{0} {1}, {2} {3}", this.Address, this.City, this.State, this.Zip); } } public List<PatientViewModel> Patients { get; set; } public List<int> PatientsToDelete { get; set; } } }这是整个js文件:
var ObjectState = { Unchanged: 0, Added: 1, Modified: 2, Deleted: 3 }; var patientMapping = { 'Patients': { key: function (patient) { return ko.utils.unwrapObservable(patient.PatientId); }, create: function (options) { return new PatientViewModel(options.data); } } }; PatientViewModel = function (data) { var self = this; ko.mapping.fromJS(data, patientMapping, self); self.flagPatientAsEdited = function () { if (self.ObjectState() != ObjectState.Added) { self.ObjectState(ObjectState.Modified); } return true; }, self.FullName = ko.computed(function () { return (self.FirstName() + " " + self.LastName()); }); } SiteViewModel = function (data) { var self = this; ko.mapping.fromJS(data, patientMapping, self); self.save = function () { $.ajax({ url: "/Site/Save/", type: "POST", data: ko.toJSON(self), contentType: "application/json", success: function (data) { if (data.siteViewModel != null) { alert("Changes were saved successfully."); ko.mapping.fromJS(data.siteViewModel, {}, self); } if (data.newLocation != null) { window.location = data.newLocation; } } }); }, self.flagSiteAsEdited = function () { if (self.ObjectState() != ObjectState.Added) { self.ObjectState(ObjectState.Modified); // KO observables are functions & !properties \tf pass value in function } return true; // Tell KO to allow default action for control that raised this event }, self.addPatient = function () { var patient = new PatientViewModel({ SiteId: 0, FirstName: "", LastName: "", ObjectState: ObjectState.Added }); self.Patients.push(patient); }, self.deletePatient = function (patient) { self.Patients.remove(this); if (patient.PatientId() > 0 && self.patientsToDelete.indexOf(patient.PatientId()) == -1) { self.PatientstoDelete.push(patient.PatientId()); } }; }更新:经过一些调试后,我注意到js文件中的“PatientsToDelete”被列为未定义,即使我在ViewModel中声明它。 虽然js文件中还有一些我遗漏的东西吗?
I have an edit form that displays items that have been added/stored with the option to delete items. If I click "Delete", the "Save", the success message pops up, but when I go back to the display of the list, the item that I just "Deleted" is still there.
This is the table that displays the items with the delete button beside them:
<table id="newPatientForm"> <tr> <th>First Name</th> <th>Last Name</th> <th></th> </tr> <tbody data-bind="foreach:Patients"> <tr> <td class="form-group"><input data-bind="value: FirstName, event: {change: flagPatientAsEdited}, hasfocus: true" /></td> <td class="form-group"><input data-bind="value: LastName" /></td> <td class="form-group"><button data-bind="click: $parent.deletePatient">Delete</button></td> </tr> </tbody> </table>This is the viewModel where I declare "PatientsToDelete"
using OnboardingProject.Model; using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace OnboardingProject.Web.ViewModels { public class SiteViewModel : IModel { public SiteViewModel() { Patients = new List<PatientViewModel>(); PatientsToDelete = new List<int>(); } public int SiteId { get; set; } public string Name { get; set; } public string Address { get; set; } public string City { get; set; } public string State { get; set; } public string Zip { get; set; } public string CreatedOn { get; set; } public string ModifiedOn { get; set; } public ObjectState ObjectState { get; set; } public string MessageToClient { get; set; } // Message sent to client from server to demonstrate data-flow when property is not in db // @TODO: Change to client CompleteAddress public string CompleteAddress { get { return string.Format("{0} {1}, {2} {3}", this.Address, this.City, this.State, this.Zip); } } public List<PatientViewModel> Patients { get; set; } public List<int> PatientsToDelete { get; set; } } }This is the entire js file:
var ObjectState = { Unchanged: 0, Added: 1, Modified: 2, Deleted: 3 }; var patientMapping = { 'Patients': { key: function (patient) { return ko.utils.unwrapObservable(patient.PatientId); }, create: function (options) { return new PatientViewModel(options.data); } } }; PatientViewModel = function (data) { var self = this; ko.mapping.fromJS(data, patientMapping, self); self.flagPatientAsEdited = function () { if (self.ObjectState() != ObjectState.Added) { self.ObjectState(ObjectState.Modified); } return true; }, self.FullName = ko.computed(function () { return (self.FirstName() + " " + self.LastName()); }); } SiteViewModel = function (data) { var self = this; ko.mapping.fromJS(data, patientMapping, self); self.save = function () { $.ajax({ url: "/Site/Save/", type: "POST", data: ko.toJSON(self), contentType: "application/json", success: function (data) { if (data.siteViewModel != null) { alert("Changes were saved successfully."); ko.mapping.fromJS(data.siteViewModel, {}, self); } if (data.newLocation != null) { window.location = data.newLocation; } } }); }, self.flagSiteAsEdited = function () { if (self.ObjectState() != ObjectState.Added) { self.ObjectState(ObjectState.Modified); // KO observables are functions & !properties \tf pass value in function } return true; // Tell KO to allow default action for control that raised this event }, self.addPatient = function () { var patient = new PatientViewModel({ SiteId: 0, FirstName: "", LastName: "", ObjectState: ObjectState.Added }); self.Patients.push(patient); }, self.deletePatient = function (patient) { self.Patients.remove(this); if (patient.PatientId() > 0 && self.patientsToDelete.indexOf(patient.PatientId()) == -1) { self.PatientstoDelete.push(patient.PatientId()); } }; }UPDATE: After some debugging, it has come to my attention that "PatientsToDelete" in the js file is being listed as undefined even though I declare it in the ViewModel. Is there still something I am missing in the js file though?
最满意答案
在这一行:
self.PatientstoDelete.push(patient.PatientId());你没有把T大写
self.PatientsToDelete.push(patient.PatientId()); // ^--- Capitalize this TIn this line:
self.PatientstoDelete.push(patient.PatientId());You didn't capitalize the T
self.PatientsToDelete.push(patient.PatientId()); // ^--- Capitalize this T更多推荐
发布评论