Knockout Js提交绑定开始无限循环

时间:2013-07-05 13:34:26

标签: javascript mvvm knockout.js knockout-2.0

我正在尝试使用淘汰赛将表单提交给休息服务。按下submit按钮后,表单进入无限循环,直到浏览器崩溃。无法真正理解这里发生了什么。

使用Javascript:

var viewModel;
var Subscription = function () {
    var self = this;

    self.Name = ko.observable('');
    self.Email = ko.observable('');

    self.submitForm = function () {
        var viewModelJs = ko.toJS(ko.utils.unwrapObservable(viewModel));

        $.ajax('/umbraco/surface/newsletter/AddSubscription', {
            data: viewModelJs,
            type: "POST",
            async: true,
            contentType: "application/json",
            dataType: "json",
            success: function (result) {
                alert("sent");
            },
            error: function (error) {
                if (window.console && console.log) {
                    console.log(error);
                }
            }
        });

        return false;
    };
};

$(function () {
    viewModel = new Subscription();
    ko.applyBindings(viewModel);
});

这是我的表格:

<form class="form-horizontal" data-bind="submit: $root.submitForm">
    <div class="control-group">
        <label class="control-label" for="Name">Nombre</label>
        <div class="controls">
            @Html.TextBoxFor(m => m.Name, new { placeholder = "Nombre", data_bind = "value: Name" })
            @Html.ValidationMessageFor(m => m.Name)
        </div>
    </div>

    <!-- A couple more controls here -->

    <div class="control-group">
        <div class="controls">
            <button type="submit" class="btn">Enviar</button>
        </div>
    </div>
</form>

1 个答案:

答案 0 :(得分:3)

ko.toJS 保留函数,就像使用jquery函数一样,它将运行数据对象上的所有函数(viewModelJS)。这反过来导致无限循环。

你可以使用映射对象并忽略像这样的函数

  var viewModelJs = ko.mapping.toJS(ko.utils.unwrapObservable(viewModel), {
  ignore: ['submitForm']});