0

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

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

http://jsfiddle.net/rZBhx/4/

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's？

4

1 回答 1

1

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

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

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

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

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

于 2013-03-26T00:50:00.703 回答