2

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

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

我有一个导入大量 subViewModel 的 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') 上？

欢迎任何帮助。

谢谢，--斯科特

4

3 回答 3

2

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

<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);
于 2013-05-14T14:47:40.790 回答
0

好吧，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
                }
            }
        });
    };
于 2013-05-14T17:08:33.897 回答
0

我已经按照您原来的要求做了这样的事情：

<form id="registration-form" data-bind="submit: CreateUser.bind($root,$data)" method="POST">
于 2013-09-02T19:20:27.380 回答