2017-08-15 40 views
0

如果我想更新模型,表面不会更新,但模型已经。Mvc dotnet核心淘汰赛模型不更新UI

保存方法后,模型更新,但不是图形界面。

有谁知道我如何更新模型,以便视图也可以进行更改。

查看:

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

控制器:

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检查/控制台:

型号befor节约:节约

{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 

后:

{CurrentSnippet: {…}, __ko_mapping__: {…}, Selection: ƒ, Snippets: ƒ} 
CurrentSnippet 
: 
{SnippetId: ƒ, Name: ƒ, Description: ƒ, Code: ƒ, Modified: ƒ} 
Selection 
: 
ƒ c() 
Snippets 
: 
ƒ c() 
__ko_mapping__ 
: 
{mappedProperties: {…}, ignore: ƒ, include: ƒ, copy: ƒ, observe: ƒ, …} 
__proto__ 
: 
Object 

回答

2

也许你需要在ajax.done更新视图模型,而不是娱乐:

  }).done(function(response) { 
       // Created here a model instance is not bound to the UI 
       model = ko.mapping.fromJS(ko.mapping.fromJSON(response)); 
      }).fail(function(jqXHR, textStatus) { 

你可以做到这一点在映射plugin documentation喜欢描述:

var data = { 
    name: 'Scot', 
    children: [ 
     { id : 1, name : 'Alicw' } 
    ] 
} 

你可以将其映射到视图模型没有任何问题:

var viewModel = ko.mapping.fromJS(data); 

现在,让我们说,数据更新是没有任何错别字:

var data = { 
    name: 'Scott', 
    children: [ 
     { id : 1, name : 'Alice' } 
    ] 
} 

两件事情都发生在这里:名称由苏格兰人改为斯科特和 儿童[0]。名称从Alicw改变给打字错误的爱丽丝。

ko.mapping.fromJS(data, viewModel); 
+0

谢谢它的工作原理:您 可以根据这个新的数据更新视图模型 –