전역 범위에서 jQuery 리스너 설정

Question

jQuery (또는 일반적으로 javascript)로 많은 작업을 한 지 꽤 오래되었습니다. 우리의 앱이 모든 메소드를 글로벌 스코프에서 가지려고 노력하고 있습니다. 모든 점이 자체 네임 스페이스에 있습니다.

내가 취하는 접근법은 노출 모듈 패턴과 객체 리터럴 패턴의 혼합을 사용하는 것입니다.

나는, 나는 각 페이지의 객체 리터럴 패턴을 사용하고, 나는 서버에서 온 단순히 설정 변수 (ASP.NET MVC 면도기) 여기에서

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)를 초기화해야합니다.

네임 스페이스 비트를 모두 제거하면이 코드는 예상대로 작동하지만 모듈 모듈 표시 패턴을 사용할 때 청취자는 '클릭'이벤트를 트리거하지 않습니다.

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 
       }); 
      }); 
     }); 
    } 
})(); 

내가 누락 된 부분을 누군가가 가리킬 수 있습니까?

Answer 1

좋아요, 그래서 거의 옳았습니다 ... 문서 준비 호출에 중첩해야했습니다.

"USE STRICT"; 

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

      var onMenuItemSelected = 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. 
      }; 

      var initMenu = function() { 
       menu = $("#stratosphereContextMenu").kendoContextMenu({ 
        orientation: 'vertical', 
        alignToAnchor: true, 
        filter: ".contextMenu", 
        showOn: "click", 
        animation: { 
         open: { 
          effects: "fadeIn" 
         }, 
         duration: 250 
        }, 
        select: onMenuItemSelected 
       }); 
      }; 

      // 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 = $('#stratosphereContextMenu').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 
         }); 
        }); 
       }); 
      } 
     })(); 
    }, 0); 
});