Question

我有一个编辑表单，显示已添加/存储的项目以及删除项目的选项。如果我单击“删除”，“保存”，则会弹出成功消息，但当我返回列表显示时，我刚刚“删除”的项目仍然存在。

这是显示旁边带有删除按钮的项目的表格：

<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());
        }
    };
}

UPDATE：经过一些调试后，我注意到js文件中的“PatientsToDelete”被列为未定义，即使我在ViewModel中声明它。虽然在js文件中还有一些我遗漏的东西吗？

Answer 1

在这一行：

self.PatientstoDelete.push(patient.PatientId());

你没有把T大都化。

self.PatientsToDelete.push(patient.PatientId());
//           ^--- Capitalize this T

删除项目实际上并未将其删除

1 个答案: