Question

我遇到与this question类似的问题，我找不到解决方法。我在视图中有这个绑定

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

触发它

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

由于

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

Answer 2

我认为这段代码是你的问题，我不是淘汰赛专家，但是之前没有这样做

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

也许宁可做

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

看看会发生什么

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

<强>更新

看看这个fiddle

所以对于你的代码：

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;


    };


};

重置表单时未触发敲除绑定

2 个答案: