knockout.js - Using ko.mapping plugin to edit and insert new records -

i using ko.mapping plugin map data server client.

i love fact can write model once on server , don't have rewrite same model properties on client.

i doing think pretty common task. have list of records , wanting able insert , edit them. created jsfiddle

i have gotten far binding list ui , have editting of existing items working

i stuck how allow inserting of new records.

my object basic

 [{     "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)); 

do have create new observable like

self.selectedcustomer = ko.observable(); 

when click on edit button inputs populated. how can create new record?

<div data-bind="with:selectedcustomer">     <input placeholder="firstname" data-bind="value:firstname" />     <input placeholder="lastname" data-bind="value:lastname" /> </div> 

could smarter me please take quick @ fiddle , out doing wrong. think close missing something.

thanks assistance possible!

you need create new customer viewmodel. can using existing mapping this

var customer = mapping.customers.create({ data: {     customerid: "",     firstname: "",     lastname: "",     storecustomerid: "" }}); 

then push existing customers , select:

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

see updated fiddle