0

我有与此问题类似的问题，但找不到解决方案。我在视图中有这个绑定

<div class="validation-summary-errors">
    <span data-bind="visible: $root.addErrors().length > 0">Please correct the following errors:</span>
    <!-- ko foreach: $root.addErrors -->
    <ul data-bind="text: error"></ul>
    <!-- /ko -->
</div>

在js中我有这两种方法和observableArray

this.addErrors = ko.observableArray();

this.deactiveAddForm = function () {
    self.addFormIsActive(false);
    self.hasReminder(false);
    self.addErrors([]);
    utils.resetForm('addEventForm');
};

this.add = function () {
    var form = document.getElementById('addEventForm');
    if ($(form).valid()) {
        $.ajax({
            url: form.action,
            type: form.method,
            data: $(form).serialize()
        }).done(function (result) {
            if (result.valError) {
                self.addErrors(ko.utils.arrayMap(result.addErrors, function (addError) {
                    return { error: addError };
                }));
            } else {
                self.deactiveAddForm();
                submissionSuccess(result.groups);
            }
        }).fail(function (jqXHr, textStatus, errorThrown) {
            self.addErrors([{ error: errorThrown }]);
        });
    }
    return false;
};

问题是调用 utils.resetForm('addEventForm') 会阻止绑定工作，因此错误不会显示在视图中（尽管存在于可观察数组中）。

这是这个方法

resetForm: function (id) {
    var addForm = $(document.getElementById(id));

    if (addForm.length > 0) {
        addForm[0].reset();

        // Clear the inputs
        addForm.find('input:text, input:password, input:file, select, textarea').val('');
        addForm.find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
        $(".selectMenu").trigger("liszt:updated");
    }
},

我无法用 self.addErrors.valueHasMutated() 触发它

有没有办法强制可见绑定工作？

谢谢

4

2 回答 2

1

您需要正确设置上下文。

function viewModel() {
    var self = this;

    self.addFormIsActive = ko.observable();
    self.hasReminder = ko.observable(true);
    self.addErrors = ko.observableArray();

    self.deactiveAddForm = function () {
        self.addFormIsActive(false);
        self.hasReminder(false);
        self.addErrors([]);
        utils.resetForm('addEventForm');
    };

    self.add = function () {
        var form = document.getElementById('addEventForm');
        if ($(form).valid()) {
            $.ajax({
                url: form.action,
                type: form.method,
                data: $(form).serialize()
            }).done(function (result) {
                if (result.valError) {
                    self.addErrors(ko.utils.arrayMap(result.addErrors, function (addError) {
                        return { error: addError };
                    }));
                } else {
                    self.deactiveAddForm();
                    submissionSuccess(result.groups);
                }
            }).fail(function (jqXHr, textStatus, errorThrown) {
                self.addErrors([{ error: errorThrown }]);
            });
        }
        return false;
    };
}

ko.applyBindings(new viewModel());

this.addErrors() 在您的示例中不再等于 self.addErrors() 。

此外，如前所述，您将 .push() 放入一个数组中，您不会做任何您想做的事情......

self.addErrors.push(whateverError);
于 2013-09-25T16:08:35.400 回答
0

我认为此代码是您的问题，我不是淘汰赛专家，但以前没有这样做过

 self.addErrors(ko.utils.arrayMap(result.addErrors, function (addError) {
                return { error: addError };
            }));

也许宁愿做

self.addErrors.push({error: 'error'});

看看会发生什么

如果这不能解决它，你可以创建一个有问题的 jsfiddle 吗？

更新

看看这个小提琴

所以对于你的代码：

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

    self.addErrors = ko.observableArray();

    self.deactiveAddForm = function () {
        self.addFormIsActive(false);
        self.hasReminder(false);
        self.addErrors([]);
         utils.resetForm('addEventForm');
    };

    self.add = function () {
        if ($(form).valid()) {
            $.ajax({
                url: form.action,
                type: form.method,
                data: $(form).serialize()
            }).done(function (result) {
                if (result.valError) {
                    self.addErrors.push({
                        error: result.addErrors
                    });


                } else {
                    self.deactiveAddForm();
                    submissionSuccess(result.groups);
                }
            }).fail(function (jqXHr, textStatus, errorThrown) {
                self.addErrors.push({
                    error: errorThrown 
                });
            });
        }
        return false;


    };


};
于 2013-09-25T15:39:33.180 回答