html - Mvc dotnet core knockout model not updating UI -

if want update model, surface not update, model already.

after save method, model updated not graphical interface.

does know how update model view takes changes.

view:

    var model = ko.mapping.fromjs(@html.raw(this.model));      var code = document.getelementbyid("editor-area");      var editor = codemirror.fromtextarea(code, {                 linenumbers: true,                 matchbrackets: true,                 mode: "text/x-csrc",                 linewrapping: true,                 theme: 'the-matrix'});              model.save = function() {                 model.currentsnippet.code(editor.getvalue());                 var url = "/snippet/save";                  $.ajax({                     url: url,                     method: "post",                     data: { viewmodel: ko.tojs(model.currentsnippet)},                     }).done(function(response) {                         model = ko.mapping.fromjs(ko.mapping.fromjson(response));                     }).fail(function( jqxhr, textstatus ) {                     alert("fail: " + textstatus);                 });             }      var bindcontainer = document.getelementbyid("editor");     ko.applybindings(model, bindcontainer); 

controller:

    public iactionresult save(viewmodelsnippet viewmodel)     {          var model = mapper.mappeviewmodelsnippetzusnippet(viewmodel);          _snippetrepository.save(model);          var returnmodel = jsonconvert.serializeobject(new viewmodelsnippets { selection = guid.newguid(), snippets = mapper.mappesnippetszuviewmodelsnippets(_snippetrepository.giballesnippets()) , currentsnippet = viewmodel});          return json(returnmodel);     } 

chrome inspector/console:

model befor save:

{currentsnippet: {…}, __ko_mapping__: {…}, selection: ƒ, snippets: ƒ, save: ƒ, …} currentsnippet : {snippetid: ƒ, name: ƒ, description: ƒ, code: ƒ, modified: ƒ} selection : ƒ c() snippets : ƒ c() clear : ƒ () deploy : ƒ () load : ƒ () save : ƒ () snippetclick : ƒ (data) __ko_mapping__ : {ignore: array(0), include: array(1), copy: array(0), observe: array(0), mappedproperties: {…}, …} __proto__ : object 

after save:

{currentsnippet: {…}, __ko_mapping__: {…}, selection: ƒ, snippets: ƒ} currentsnippet : {snippetid: ƒ, name: ƒ, description: ƒ, code: ƒ, modified: ƒ} selection : ƒ c() snippets : ƒ c() __ko_mapping__ : {mappedproperties: {…}, ignore: ƒ, include: ƒ, copy: ƒ, observe: ƒ, …} __proto__ : object 

probably need update view model instead of recreation on ajax.done:

            }).done(function(response) {                 // created here model instance not bound ui                 model = ko.mapping.fromjs(ko.mapping.fromjson(response));             }).fail(function( jqxhr, textstatus ) { 

you can described in mapping plugin documentation:

var data = {     name: 'scot',     children: [         { id : 1, name : 'alicw' }     ] } 

you can map view model without problems:

var viewmodel = ko.mapping.fromjs(data); 

now, let’s data updated without typos:

var data = {     name: 'scott',     children: [         { id : 1, name : 'alice' }     ] } 

two things have happened here: name changed scot scott , children[0].name changed alicw typo-free alice. can update viewmodel based on new data:

ko.mapping.fromjs(data, viewmodel);