1

jQuery (または一般的には JavaScript) で多くのことを行ってからかなりの時間が経ちました。私たちのアプリは、すべてのメソッドがグローバル スコープにある状態から、すべてが独自の名前空間にある状態に移行しようとしています。

私が取っているアプローチは、公開モジュール パターンとオブジェクト リテラル パターンのハイブリッドを使用することです。

個々のページごとにオブジェクト リテラル パターンを使用しており、サーバー (ASP.NET MVC Razor) からの変数を単純にセットアップするために使用しています。

var st = st || {};
st.SharedContextMenuCommon = {
    ContextMenuControllerName: '@Model.ControllerName',
    BindingTargetName: '@Model.TargetName',
    StratosphereGlobalImageUrl: '@Web_Helpers.StratosphereImageUrl("")'  // yes this is empty since we only need the root. we can't pass a JS variable to Razor
};

ここから、すべての面倒な作業を行う外部ファイルがあります。この特定の状況では、Kendo ContextMenu があり、ネストされた名前空間内からリスナー (jQuery) を初期化する必要があります。

すべての名前空間ビットを削除すると、このコードは期待どおりに機能しますが、Revealing Module パターンを使用すると、リスナーは「クリック」イベントでトリガーされません。

var st = st || {};
st.SharedContextMenu = (function() {
    // check to see if menu exists
    var menu = $("#contextMenu");

    var initMenu = function() {
        menu = $("#contextMenu").kendoContextMenu({
            orientation: 'vertical',
            alignToAnchor: true,
            filter: ".contextMenu",
            showOn: "click",
            animation: {
                open: {
                    effects: "fadeIn"
                },
                duration: 250
            },
            select: function(e) {
                this.close(); // close the context menu
                var action = $(e.item).find("[data-action]").data("action"); // extract the javascript string that is to be actioned on
                var id1 = e.target.dataset.recordid; // extract the specific record ID (typically a GUID)
                var id2 = e.target.dataset.recordidalt; // extract the specific alt record ID (typically a GUID)
                var func = new Function(String.format(action, id1, id2)); // format the action (if the string is a formattable)
                return (func()); // execute the string. This is essentially like EVAL, but since this is an internal app, it should be safe.
            }
        });
    };

    // only init the menu if it exists.
    if (menu) {
        initMenu();
        $('#' + st.SharedContextMenuCommon.BindingTargetName).on('click', '.contextMenu', function() {
            var recordId = $(this).data('recordid');
            $.getJSON(st.SharedContextMenuCommon.ContextMenuControllerName + '/?recordId=' + recordId, function(data) {
                var contextMenu = $('#contextMenu').data('kendoContextMenu');
                var items = [];
                $.each(data, function(key, value) {
                    items.push({
                        text: '<span data-action="' + value.OnClickJavascript + '">' + value.Text + '</span>',
                        encoded: false,
                        imageUrl: st.SharedContextMenuCommon.StratosphereGlobalImageUrl + value.Image
                    });
                });

                contextMenu.setOptions({
                    dataSource: items
                });
            });
        });
    }
})();

誰かが私が見逃している作品を教えてもらえますか?

4

1 に答える 1