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には、これら2つのメソッドと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

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 に答える