【问题标题】:KnockoutJs submit binding starts inifinite loopKnockout Js 提交绑定启动无限循环
【发布时间】:2013-07-03 15:12:36
【问题描述】:

我正在尝试使用敲除将我的表单提交给休息服务。按下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>

【问题讨论】:

    标签: javascript mvvm knockout.js knockout-2.0


    【解决方案1】:

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

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

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

    【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2013-03-09
    • 2012-01-09
    • 2018-10-19
    • 1970-01-01
    • 2018-11-20
    • 2019-03-10
    • 1970-01-01
    • 2014-02-21
    相关资源
    最近更新 更多