Question

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

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

我有一个masterViewModel，可以导入大量的subViewModel。这一切都正常，我可以设置可自动填充字段输入的可观察元素等。

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

在我验证并保存表单字段（通过ajax post）后，我想将该部分置于只读模式，但我不知道如何在我的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'）挂起模型？

欢迎任何帮助。

谢谢， - 斯科特

Answer 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);

Answer 2

约瑟夫的方法可能有用，但在我测试之前，我删除了提交处理程序，而是使用了保存/编辑按钮的点击处理程序，因为它们包含模型的句柄。然后我意识到，因为会有一个保存＆amp;为每个模型编辑函数，并且每个模型都会做同样的事情，跨模型，我将它移动到masterViewModel中。然后我通过

引用它们

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

然后，该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
                }
            }
        });
    };

Answer 3

我做了你原来问过的事情：

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

knockoutjs - Ajax表单提交并更新viewModel成功回调

3 个答案: