KnockoutJS，Ajax调用后更新视图模型 [英] KnockoutJS, updating ViewModel after ajax call

问题描述

我使用的淘汰赛和淘汰赛映射插件。

I am using Knockout and the Knockout Mapping plugin.

• 我的MVC3动作直接返回一个视图，而不是JSON作为这种转换我的型号为JSON。


• 这是一个数据输入窗体，由于系统验证的本质是服务层中全部完成，在视图模型中的一个响应对象返回警告。


• 初始绑定和更新工作，正确其更新后的行为，是造成我的问题。

我的问题是调用AJAX POST和接收我的JSON响应淘汰赛没有更新我的所有绑定...后，如果可观察/映射已经脱落

如果我有一个额外的ko.applyBindings（视图模型）;在成功的事情做的工作......但问题再与多个绑定起身敢肯定这不是正确的解决方案。

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.

这是HTML /模板/绑定

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

这是淘汰赛/ SCRIPT

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>

这是JSON从包括验证信息的请求成功返回的响应。

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"
            }
        ]
    }   
}

更新

提琴手演示是我所经历的修剪活生生的例子。我与返回的JSON，但viewModel.Response对象和属性的PROJECT_NAME更新不被通过它们的数据绑定更新。具体来说Response.HasWarning（）。

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().

我改回ko.mapping.updateFromJS因为在我的控制，我专门回JSON（视图模型）。

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

整理了我最初的code /问题相匹配的演示。

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

推荐答案

我想回应被保留，当我改变回应到RESP，一切正常。请参见 http://jsfiddle.net/BBzVm/

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

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