knockoutjs - Ajax 表单在成功回调中提交和更新 viewModel答案

【问题标题】：knockoutjs - Ajax Form Submit and update viewModel in success callbackknockoutjs - Ajax 表单在成功回调中提交和更新 viewModel
【发布时间】：2013-05-08 19:11:42
【问题描述】：

我正在构建一个包含 10 个不同部分的大页面，并且正在使用 Knockout 进行事件绑定等。

每个部分都包含一个表单，该表单具有自己的 viewModel 及其字段和验证属性等。我在阅读 this 关于多视图模型的帖子后对其进行了样式化。

我有一个导入大量子视图模型的 masterViewModel。这一切都很好，我可以设置可观察的元素，在字段输入等时自动填充。

我正在将我的表单提交绑定到我的 viewModel 中的一个函数，如下所示。

验证并保存表单字段（通过 ajax 发布）后，我想将该部分置于只读模式，但我不知道如何在我的 ajax 调用的成功回调中获取我的 viewModel 的句柄.

<form action="webservice.php" method="POST" data-bind="submit: contactInformation.validateSubmit">


this.validateSubmit = function(formElement){

    var result = ko.validation.group(this, {deep: true});
    if (!this.isValid()) {
        result.showAllMessages(true);
        return false;
    }

    //actually save stuff, call ajax, submit form, etc;
    //  setup a promise
    var posting = $.post( "./webservice.php", $(formElement).serialize() );

    posting.done(function( data ) {
        this.contactInformation.model_state("summary"); // Uncaught TypeError: Cannot call method 'model_state' of undefined 
        // i also tried the line below, instead of line above...
        ko.mapping.updateFromJS(this, data); // Uncaught TypeError: Cannot call method 'updateFromJS' of undefined 
    });

};

有人知道怎么做吗？我有一个来自 contactInformation.validateSubmit() 函数的 formElement 句柄。我是否需要在某处手动订阅监听器？或者有没有办法将模型挂在 $(formElement).data('model') 上？

欢迎任何帮助。

谢谢， -- 斯科特

【问题讨论】：

标签： knockout.js

【解决方案1】：

也许你可以稍微不同地构建你的调用，以便你的表单提交绑定到主视图模型上的一个函数

<form data-bind="submit: submitContactInformation">

然后，在您的视图模型中，分别调用您的子视图模型：

var ViewModel = function () {
    var self = this;

    self.contactInformation = ...import sub view model

    self.isContactInformationReadOnly = ko.observable(false);

    self.submitContactInformation= function () {
        //make ajax call
        if( contactInformation.validateSubmit() ){
            self.isContactInformationReadOnly(true);
        }
    };
};

var vm = new ViewModel();
ko.applyBindings(vm);

【讨论】：

【解决方案2】：

Joseph 的方法可能有效，但在我测试之前，我删除了提交处理程序，而是使用了保存/编辑按钮的单击处理程序，因为它们包含模型的句柄。然后我意识到，由于每个模型都有一个保存和编辑功能，并且每个模型都会做同样的事情，所以我将它移到了 masterViewModel 中。然后我通过

引用它们

data-bind: "click: $root.save"

然后，该保存方法包含该提交函数中的大部分内容，以及一些设置 model_state 属性的信息：

    this.save = function(model, event) {
        log(model);

        var $form = $(event.target).closest('form');

        var result = ko.validation.group(this, {deep: true});
        if (!this.isValid()) {
            result.showAllMessages(true);
            return false;
        }

        //actually save stuff, call ajax, submit form, etc;
        var posting = $.post( $form.attr("action"), $form.serialize() );

        posting.done(function( data ) {
            if (data.status === "success") {
                model.model_state("summary");
            } else {
                if (data.errors) {
                    // display errors
                }
            }
        });
    };

【讨论】：

这意味着您在输入时丢失了提交，对吗？我也在寻找一种方法来做你最初尝试过的事情。我会以我的方式提交答案。

【解决方案3】：

我已经按照你原来的要求做了：

<form id="registration-form" data-bind="submit: CreateUser.bind($root,$data)" method="POST">

【讨论】：