0

要求されたときにダイアログコードをDOMに取り込むためにKOifタグを使用しているという問題があります。ダイアログには、送信ボタンのあるフォームがあります。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;

    });
});

ちなみに、私のフィドルでは、キャンセルボタンはkoifステートメントで1回だけ機能します。なぜなのかわかりません。私のライブサイトでは、これは起こっていません。HTMLからを削除すると、送信が禁止され、キャンセルボタンが引き続き機能します。

KOを維持しながら、これを機能させることができる方法はありますか？

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/

カスタムバインディングを使用して、jQueryUIダイアログの周りのロジックをカプセル化することも検討してください。この答えを見てください：jqueryuiダイアログをknockoutjsと統合する

于 2013-03-26T00:50:00.703 に答える