Question

我正在使用Knockout Validation，当我将视图模型发布到控制器时，我得到异常“Uncaught RangeError：超出最大调用堆栈大小”。我有一个主视图模型，因为我在同一视图中使用CustomerViewModel（2个引导模式），第一个是创建客户，另一个是编辑客户。知道为什么抛出异常？

[HttpPost]
public JsonResult SaveCustomer(Customer model)
{
    string status = "ok";

    return Json(status, JsonRequestBehavior.AllowGet);
}

public class Customer
{
    public string Name { get; set; }
}

$(document).ready(function () {

    var CustomerSetupViewModel = function () {
        var self = this;

        self.Name = ko.observable("");

        self.Validation = ko.validatedObservable([
            self.Name.extend({
                required: true
            })    
        ]);

        var CustomerSetup = {
            Name: self.Name
        };

        self.CustomerSetup = ko.observable();

        self.GetCustomer = function () {            
            var data = { Name: "ToBeUpdated" };
            self.CustomerSetup(data);
        }

        self.Save = function () {
            
            if (self.Validation.isValid()) {
                
                $.post("/Home/SaveCustomer", self, function (data) {
                    if (data == "ok")                    
                        alert("successful");                    
                    else
                        alert("error");
                });

            }
            else {
                self.Validation.errors.showAllMessages();
            }
        }

        self.Update = function () {            
            var name = self.CustomerSetup().Name;            
            alert(name);
        }        
    }

    var MainViewModel = function () {        
        self = this;
        self.NewCustomer = new CustomerSetupViewModel();
        self.EditCustomer = new CustomerSetupViewModel();
    }

    vm = new MainViewModel();
    ko.applyBindings(vm);

    $("#updateCustomer").click(function () {        
        vm.EditCustomer.GetCustomer();
    });

    $("#NewCustomer").on("show.bs.modal", function (e) {
        vm.NewCustomer.Name("");        
        vm.NewCustomer.Validation.errors.showAllMessages(false);
    })

});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<hr />
<a id="addCustomer" class="btn btn-default" data-toggle="modal" data-target="#NewCustomer">Add Customer</a>
<a id="updateCustomer" class="btn btn-default" data-toggle="modal" data-target="#UpdateCustomer">Update Customer</a>

<!-- Modal -->
<div id="NewCustomer" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="NewModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="NewModalLabel">New Customer</h4>
            </div>
            <div class="modal-body">
                <div class="panel panel-default">
                    <div class="panel-heading"></div>
                    <div class="panel-body">

                        <div class="row">
                            <div class="col-md-4">
                                <label>Customer Name</label>
                                <input type="text" id="Name" class="form-control" data-bind="value: NewCustomer.Name" />
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <a role="button" class="btn btn-default" data-dismiss="modal">Close</a>
                        <a role="button" class="btn btn-primary" data-bind="click: NewCustomer.Save()">Save</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div id="UpdateCustomer" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="UpdateModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="UpdateModalLabel">Update Customer</h4>
            </div>
            <div class="modal-body">
                <div class="panel panel-default">
                    <div class="panel-heading"></div>
                    <div class="panel-body" data-bind="foreach: EditCustomer.CustomerSetup">

                        <div class="row">
                            <div class="col-md-4">
                                <label>Customer Name</label>
                                <input type="text" id="Name" class="form-control" data-bind="value: Name" />
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <a role="button" class="btn btn-default" data-dismiss="modal">Close</a>
                        <a role="button" class="btn btn-primary" data-bind="click: EditCustomer.Update">Update</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.3/knockout.validation.js"></script>

Answer 1

我在Save函数中使用ko.toJSON（）后找到了解决方案。 ko.toJSON（）生成一个没有Knockout结构的JavaScript对象。通过这种方式，我避免了无限循环。

self.Save = function () {

        if (self.Validation.isValid()) {

            $.post("/Home/SaveCustomer", ko.toJSON(self), function (data) {
                if (data == "ok")                    
                    alert("successful");                    
                else
                    alert("error");
            });

        }
        else {
            self.Validation.errors.showAllMessages();
        }
    }

Knockout Uncaught RangeError：超出最大调用堆栈大小

1 个答案: