Mvc dotnet核心淘汰模型没有更新UI

时间:2017-08-15 13:34:56

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

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

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

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

查看:

    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

1 个答案:

答案 0 :(得分: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' }
    ]
}
     

这里发生了两件事:名字从苏格兰变成斯科特和   children [0] .name从Alicw改为无错误的Alice。您   可以根据这个新数据更新viewModel:

ko.mapping.fromJS(data, viewModel);