KnockoutJS，在ajax调用后更新ViewModel [英] KnockoutJS, updating ViewModel after ajax call

问题描述

我正在使用 Knockout 和 Knockout Mapping 插件.

• 我的 MVC3 操作直接返回一个视图而不是 JSON，因此我将我的模型转换为 JSON.
• 这是一个数据输入表单，由于系统验证的性质，所有验证都在服务层完成，并在 ViewModel 的响应对象中返回警告.
• 初始绑定和更新工作正常，这是导致我出现问题的更新后"行为.

我的问题是在调用 AJAX POST 并收到我的 JSON 响应敲除后没有更新我的所有绑定......好像可观察/映射已经下降

如果我包含一个额外的 ko.applyBindings(viewModel);在 成功 中，事情确实有效……但是，多个绑定会出现问题，并且我确信这不是正确的解决方案.

这是 HTML/模板/绑定

<form action="@Url.Action("Edit")" data-bind="提交:保存"><div id="editListing" data-bind="模板:'editListingTemplate'"></div><div id="saveListing" class="end-actions"><button type="submit">保存列表</button>

</表单><!-- 结束表格--><!-- 模板--><script type="text/html" id="editListingTemplate"><div class="warning message error" data-bind="visible: Response.HasWarning"><span>更正以下内容以保存</span><ul>{{each(i, warning) Response.BusinessWarnings}}<li data-bind="text: Message"></li>{{/每个}}

<字段集><legend>关键信息</legend><div class="editor-label"><label>项目名称</label>

<div class="editor-field"><input data-bind="value: Project_Name" class="title"/>

</fieldset><!-- 结束模板-->

这是淘汰赛/脚本

这是成功请求返回的响应 JSON，包括验证消息.

<代码>{身份证":440，项目名": ""，回复": {HasWarning":真，商业警告":[{异常类型":2，消息":项目无效."}, {异常类型":1，"Message": "Project_Name 不能为空"}]}}

更新

Fiddler 演示 是我所经历的修剪过的现场示例.我使用返回的 JSON 更新了 Project_Name，但是 viewModel.Response 对象和属性没有通过它们的数据绑定进行更新.特别是 Response.HasWarning().

我改回 ko.mapping.updateFromJS 因为在我的控制器中我专门返回 Json(viewModel).

清理我的初始代码/问题以匹配演示.

解决方案

我猜 Response 是保留的，当我将Response"更改为resp"时，一切正常.请参阅 http://jsfiddle.net/BBzVm/

I am using Knockout and the Knockout Mapping plugin.

• My MVC3 Action returns a View and not JSON directly as such I convert my Model into JSON.
• This is a data entry form and due to the nature of the system validation is all done in the Service Layer, with warnings returned in a Response object within the ViewModel.
• The initial bindings and updates work correctly its the "post-update" behavior that is causing me a problem.

My problem is after calling the AJAX POST and and receiving my JSON response knockout is not updating all of my bindings... as if the observable/mappings have dropped off

If I include an additional ko.applyBindings(viewModel); in the success things do work... however issues then arise with multiple bindings and am certain this is not the correct solution.

This is the HTML/Template/Bindings

<!-- Start Form -->
<form action="@Url.Action("Edit")" data-bind="submit: save">
<div id="editListing" data-bind="template: 'editListingTemplate'"></div>
<div id="saveListing" class="end-actions">
    <button type="submit">Save Listings</button>
</div>
</form>
<!-- End Form -->

<!-- Templates -->
<script type="text/html" id="editListingTemplate">
        <div class="warning message error" data-bind="visible: Response.HasWarning">
            <span>Correct the Following to Save</span>
            <ul>
                {{each(i, warning) Response.BusinessWarnings}}
                    <li data-bind="text: Message"></li>
                {{/each}}
            </ul>
        </div>

        <fieldset>
            <legend>Key Information</legend>
            <div class="editor-label">
                <label>Project Name</label>
            </div>
            <div class="editor-field">
                <input data-bind="value: Project_Name" class="title" />
            </div>            
        </fieldset>        
</script>
<!-- End templates -->

And this is the Knockout/Script

<script type="text/javascript">
        @{ var jsonData = new HtmlString(new JavaScriptSerializer().Serialize(Model)); }

        var initialData = @jsonData;
        var viewModel = ko.mapping.fromJS(initialData);


        viewModel.save = function () 
        {
            this.Response = null;
            var data = ko.toJSON(this);
            $.ajax({
                url: '@Url.Action("Edit")',
                contentType: 'application/json',
                type: "POST",
                data: data,
                dataType: 'json',
                success: function (result) {
                ko.mapping.updateFromJS(viewModel, result);
            }
        });
    }

    $(function() {                        
        ko.applyBindings(viewModel);            
    });
</script>

And this is the response JSON returned from the successful request including validation messages.

{
    "Id": 440,
    "Project_Name": "", 
    "Response": {
        "HasWarning": true,
        "BusinessWarnings": [
            {
                "ExceptionType": 2,
                "Message": "Project is invalid."
            }, {
                "ExceptionType": 1,
                "Message": "Project_Name may not be null"
            }
        ]
    }   
}

UPDATE

Fiddler Demo Is a trimmed live example of what I am experiencing. I have the Project_Name updating with the returned JSON but the viewModel.Response object and properties are not being updated through their data bindings. Specifically Response.HasWarning().

I've changed back to ko.mapping.updateFromJS because in my controller I am specifically returning Json(viewModel).

Cleaned up my initial code/question to match the demo.

解决方案

I guess Response is reserved, when I change "Response" to "resp", everything went fine. See http://jsfiddle.net/BBzVm/

这篇关于KnockoutJS，在ajax调用后更新ViewModel的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！