Mvc dotnet core 淘汰模型不更新 UI答案

【问题标题】：Mvc dotnet core knockout model not updating UIMvc dotnet core 淘汰模型不更新 UI
【发布时间】：2018-01-23 10:34:25
【问题描述】：

如果我想更新模型，表面不会更新，但模型已经更新了。

save方法后，模型更新，但图形界面没有更新。

有谁知道我如何更新模型以便视图也接受更改。

查看：

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

保存前的模型：

{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

【问题讨论】：

标签： html model-view-controller knockout.js asp.net-core

【解决方案1】：

您可能需要更新视图模型而不是在 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' }
    ]
}
这里发生了两件事：名字从 Scot 更改为 Scott 和 children[0].name 从 Alicw 更改为无错字的 Alice。你可以根据这些新数据更新 viewModel：
ko.mapping.fromJS(data, viewModel);

【讨论】：