使用 ko.mapping 插件编辑和插入新记录

Question

我正在使用 ko.mapping 插件将数据从服务器映射到客户端。

我真的很喜欢这样一个事实，即我可以在服务器上编写一次模型，而不必在客户端上重写相同的模型属性。

我正在做一些我认为很常见的任务。我有一个记录列表，我希望能够插入和编辑它们。 我创建了一个jsfiddle

我已经将列表绑定到 UI 并且可以编辑现有项目

我不知道如何允许插入新记录。

我的对象很基础

 [{
    "CustomerId": "1cd608c2-d980-4370-9861-c49e0811923c",
    "FirstName": "Adam",
    "LastName": "Jones",
    "StoreCustomerId": "9999 9999 9999 0002",
}]



var ViewModel = function (data) {
var self = this;

var mapping = {
    customers: {
        create: function (options) {
            console.log("mapping");
            var vm = ko.mapping.fromJS(options.data);
            console.log(vm);
            vm.FullName = ko.computed(function () {
                return vm.FirstName() + " " + vm.LastName();
            });

            return vm;
        }

    }
};

ko.mapping.fromJS(data, mapping, self);

self.selectedCustomer = ko.observable();


self.delete = function (customer) {
    self.customers.remove(customer);
}

self.edit = function (customer) {
    console.log(customer);
    self.selectedCustomer = customer;
}

self.save = function (customer) {
    console.log(customer);
    //      console.log(customer.FirstName);
    self.customers.push(customer);
}
 }

 ko.applyBindings(new ViewModel(dataFromServer));

我是否必须创建一个新的 observable 之类的东西

self.selectedCustomer = ko.observable();

当我点击编辑按钮时，输入被填充。如何创建新记录？

<div data-bind="with:selectedCustomer">
    <input placeholder="FirstName" data-bind="value:FirstName" />
    <input placeholder="LastName" data-bind="value:LastName" />
</div>

请比我聪明的人快速看一下小提琴并帮助解决我做错的事情。我想我很接近但缺少一些东西。

感谢您的任何帮助！

Answer 1

您需要创建新的客户视图模型。您可以像这样使用现有的映射来做到这一点

var customer = mapping.customers.create({ data: {
    CustomerId: "",
    FirstName: "",
    LastName: "",
    StoreCustomerId: ""
}});

然后将其推送给现有客户并选择：

self.customers.push(customer);
self.selectedCustomer(customer);

见updated fiddle