2

以下に、私が取り組んでいる単純なモーダル ダイアログ スクリプトを示します。CSS 側にはBootstrap Modalを使用しています。

私の目標は、表示され、ユーザーからのアクション ([OK] または [キャンセル] ボタンのクリック) を必要とする単純なモーダル ダイアログを作成することでした。これらのクリック イベントが発生したときに、いくつかの Callback 関数を渡して呼び出せるようにすることで、将来のプロジェクトで柔軟に使用できるようにしたいと考えました。また、キャンセルボタンを表示するかどうかなどの他のオプションもあります。（その部分はまだ入れていません）

だから私がやっていることは、関数がオプション/設定のオブジェクトを受け入れるようにすることです。また、ユーザーオプションがマージされるデフォルトオプション/設定もあり、ユーザーオプションをオプションにして、存在する場合はデフォルトを上書きできます。

これを行うにはいくつかの方法があることは知っていますが、これは私が尊敬する JS 開発者から研究したいくつかのプロジェクトで見た方法です。

以下は、私の JavaScript コード、コードを含む JSFiddle ページ、および結果を確認するための JSFiddle 出力ページです。

コードの途中にコメントがあります// PROBLEM AREA DOES NOT CALL THE CALLBACK FUNCTION

この分野では、これまでに試した3つの異なることがあります...

this.options.cancelCallback(); // This is what I wanted to work!
zPanel.dialog.confirm.options.cancelCallback(); Tried this 2nd
options.cancelCallback(); // This Works if there is a user defined callback but errors when not

そのため、現在その領域での問題は、コールバック関数を保持する必要があるものを呼び出すときthis.options.cancelCallback()です。ユーザーが渡した場合、このプロパティに再割り当てする必要があります。ユーザーがそうしなかった場合、少なくとも空のデフォルトのものを見る必要があります。

onclick関数の中にあるので、その部分がめちゃくちゃだと思いますthis..ちなみに、これは通常のクリックイベントのようには見えません。別のプロジェクトで見たところ、「機能しました」

だから私が得るエラーメッセージはUncaught TypeError: Cannot call method 'okCallback' of undefined

誰かがこの問題を回避または改善する方法を教えてもらえますか? ありがとうございました。

JSFiddle http://jsfiddle.net/jasondavis/dymn5/

全画面プレビューhttp://jsfiddle.net/jasondavis/dymn5/show/result/

var zPanel = {

    dialog: {

        confirm: function (options) {

            var i;

            // Default options
            this.options = {
                message: "",                    // String: Default Message
                cancelButton: true,             // Boolean: Show Cancel Button
                okButton: true,                 // Boolean: Show Ok Button
                cancelCallback: function () {}, // Function: Callback function when Cancel button clicked
                okCallback: function () {}      // Function: Callback function when Ok button clicked
            };
            // Merge User defined options
            for(i in options) {
                if(i in this.options) {
                    this.options[i] = options[i];
                } else {
                    throw new Error("Notice doesn't support option: " + i);
                }
            }

            var container = document.createElement('div');
            //template for modal window
            container.innerHTML += '<div class="modal-content confirm">' +
                '<div class="modal-body">' +
                '<div>' + this.options.message + '</div>' +
                '<div class="controls">' +
                '<button type="button" class="btn primary">OK</button>' +
                '<button type="button" class="btn">Cancel</button>' +
                '</div>' +
                '</div>' +
                '</div>';

            //modal window
            var modal = container.firstChild;
            container = document.createElement('div');
            container.innerHTML = '<div class="modal-backdrop fade in"></div>';
            //dark background
            var background = container.firstChild;

            //Find OK button
            var ok = modal.getElementsByTagName('button')[0];
            ok.onclick = function () {
                modal.parentNode.removeChild(modal);
                document.body.removeChild(background);

                // PROBLEM AREA DOES NOT CALL THE CALLBACK FUNCTION
                this.options.okCallback();
                //zPanel.dialog.confirm.options.okCallback();
                //options.okCallback(); // Works if there is a user defined callback
            }

            //Find Cancel button
            var cancel = modal.getElementsByTagName('button')[1];
            cancel.onclick = function () {
                modal.parentNode.removeChild(modal);
                document.body.removeChild(background);

                // PROBLEM AREA DOES NOT CALL THE CALLBACK FUNCTION
                this.options.cancelCallback();
                //zPanel.dialog.confirm.options.cancelCallback();
                //options.cancelCallback(); // Works if there is a user defined callback
            }

            document.body.appendChild(background);
            document.body.appendChild(modal);
        }

    }

}

// Create a Dialog on Click event
$('#delete_btn').click(function () {
    zPanel.dialog.confirm({
        message: 'Are you sure you want to delete action?',
        cancelCallback: function(){alert('user pressed Cancel button')},
        okCallback: function () {alert('id deleted')},
    });
});
4

2 に答える 2

6

this関数内の変更のコンテキスト、特にイベント ハンドラー。これは、 を使用する場合にもよくある問題setTimeoutです。

thisイベントが発生した要素を参照します。これを克服する方法はthis、ハンドラの外側の値をコンテナ関数の新しい変数に格納し、ハンドラでその変数を参照することです。

したがって、confirmメソッドに次のようなものを追加します。

var self = this;

そして、ハンドラーで次を使用します。

self.options.cancelCallback();

デモ: http://jsfiddle.net/dymn5/3/

渡されたコールバックにハンドラーのコンテキストを提供する方法として、次のように使用できます。

self.options.cancelCallback.apply(this, arguments);

cancelCallbackの値がイベントが発生する要素になり、オブジェクトのようthisに引数が渡されeventます。

これにより、これをオプションに使用できます。

.confirm({
    cancelCallback: function (e) {
        // `this` refers to the button
        // `e` refers to the event
    }
});
于 2013-04-13T00:18:55.793 に答える
1

JavaScript では、this常に関数の「所有者」を参照します。

// example 1: function without an owner
var displayA = function() { console.log(this.a); }
displayA(); // undefined

// example 2: object with a function member
var obj = {
    a: 1,
    displayA: displayA
}

obj.displayA(); // logs "1"
// note that obj.displayA is the exact same function as displayA. But when it is called, obj is the owner of the function.

最初の例では、displayA には「所有者」がありません。関数に所有者がいない場合、thisは自動的にグローバル オブジェクト (windowブラウザーでは) であると想定されます。

2 番目の例では、 の所有者はdisplayAですobj。この場合、thisが参照されるobjためobj.a(値 1) が表示されます。

この問題を解決する一般的な方法は次のとおりです。

// storing `this` in a variable, when a callback function needs a reference to this
var self = this;
window.onload = function() { 
    // I can use self instead of this!
    self.doStuff();
}

// using Function#call or Function#apply
// let's say I want to use the "obj" variable as the "this" reference in a function:
function myFunction(a, b) { this.doStuff(a, b); }
myFunction.call(obj, a, b); // after obj, pass normal function arguments
myFunction.apply(obj, [a, b]); // after obj, pass function arguments in an array
于 2013-04-13T00:25:27.273 に答える