Question

我有一个问题，我正在使用KO if标签在请求时将对话框代码带入DOM。在对话框中是一个带有提交按钮的表单。我希望阻止使用e.preventDefault（）提交提交按钮; 问题在于文档加载，因为对话框不在DOM中，这个覆盖功能不起作用。

我在这里创建了一个JSFiddle来演示这个问题：

model = new function () {};
model.functions = ko.observable();
model.data = ko.observable();
model.data.status = ko.observable("Status: model is live");
model.data.visible = ko.observable(false);

model.functions.showDialog = function (dialogVisible) {
    if (dialogVisible == true) {
        model.data.status("Status: Darth Dialog Activated");
        model.data.visible(true);
        $("#darthDialog").dialog({
            modal: true
        });
    } else {

        model.data.status("Status: Darth Dialog Deactivated");
        $("#darthDialog").dialog('close');
        model.data.visible(false);
    }

};

ko.applyBindings(model);

$(function preventSubmit(e) {

    $("#submissionForm").submit(function (e) {
        e.preventDefault();
        model.status("Status: Saved by Ko.da");
        return false;

    });
});

作为旁注，在我的小提琴中，取消按钮仅对ko if语句有效。我不确定为什么会这样。在我的直播网站中，这种情况并没有发生。如果删除了从HTML中阻止提交，取消按钮继续工作。

有没有可以使这个工作，同时保持KO if？

Answer 1

最简单的方法是在块内的submit元素上使用form绑定。然后，当它可见（绑定）时，提交处理程序将附加到当前DOM元素。

<form action="/darkSide/submission" data-bind="submit: submitForm" id="submissionForm" method="post">

然后，只需添加一个submitForm函数（或任何你想在模型上调用它的函数）。

此处示例：http://jsfiddle.net/rniemeyer/gDkXf/

您可能还想看一下使用自定义绑定来封装jQuery UI对话框周围的逻辑。看一下这个答案：integrating jquery ui dialog with knockoutjs

使用jquery ui对话框结合knockout if语句阻止提交按钮

1 个答案: