ajax로 javascript 모듈 패턴을 작동시키는 방법은 무엇입니까?

Question

아약스 탭을 처리 할 수 ​​있도록 일부 javascript/jquery 코드를 변환하려고합니다.

페이지가로드 될 때 모든 스크립트가로드되고 jquery live 및 livequery 플러그인을 사용하여 바인딩에 도움이됩니다.

각 시간은 부분보기 (asp.net mvc 3)에 있으며 클릭하면 컨트롤러 동작으로 이동하여 부분보기가 렌더링되어 탭에 고정됩니다.

라이브 및 라이브 쿼리는이 문제를 제외한 대부분의 문제를 해결합니다. jquery datatables.net 플러그인을 사용하고 있으며 일단 변수에 저장하고 배치하면 렌더링됩니다.

테이블 패턴이 렌더링되기 훨씬 전에 코드가 실행되는 모듈 패턴을 사용하고 있습니다. 따라서 객체를 저장하는 변수는 "정의되지 않음"입니다. jquery livequery 문으로 둘러 싸려고했는데 테이블이 실행되지만 변수는 여전히 "정의되지 않음"입니다.

내 생각 엔 C#과 다를 것이므로 참조를 업데이트 할 것입니다. 그래서 내 전역 변수 (모듈 패턴에 대한 것)에 있다고 생각하고 그것은 결코 업데이트되지 않습니다.

var tab = (function (my, $) 
{ 
    var myTable = my.dataTable = my.dataTable || {}; 

    myTable.oDataTable = {}; 


    myTable.init = function() 
    { 
     myTable.oDataTable = _fnSetupTable(); 
     _fnCreateDateFilters(); 
    }; 



    myTable.delete= function (rowToDelete) 
    { 
     // Need to get the position of the row. Need to use index 
     var pos = this.oDataTable.fnGetPosition(rowToDelete[0]); 

     /* delete row from table - first param is index of row */ 
     this.oDataTable.fnDeleteRow(pos, null, true); 
    }; 

    function _fnSetupTable() 
    { 

     /* Initialize datatable object */ 

     $('#table').livequery(function() 
     { 
      // oDataTable gets used in alot of places later on but since it undefined 
      // it will crash when used. 
      var oDataTable = $(this).dataTable(
      { 
       "bJQueryUI": true, 
       "bFilter": true, 
       "bAutoWidth": false, 
       "sPaginationType": "full_numbers", 
       "aaSorting": [[3, 'asc']], //Default sorting on datetime 
       "oLanguage": 
        { 
         "sZeroRecords": "No Records" 
        }, 
       "aoColumns": 
        [ 
         { "bSortable": true, "bSearchable": false }, 
         {"bSortable": true, "bSearchable": false }, 
         {"bSortable": false, "bSearchable": false }, 
         {"bSortable": false, "bSearchable": false }, 
         {"iDataSort": 3 }, 
         { "bSortable": false, "bSearchable": true }, 
         {"bSortable": false, "bSearchable": false },  
         {"bSortable": false, "bSearchable": false} 
        ] 
      }); 

      return oDataTable; 
     }); 

    } 

    return my; 

} (tab || {}, jQuery)); 

저는 oDataTable을 상당히 사용합니다. 내가 myTable.Delete를 호출하면 알 수 있듯이 거기에 oDataTable을 사용하지만 "정의되지 않은"상태가되고 충돌합니다.

나는 전체 순서 (그래서 위의 코드 실행이 있습니다)

/* 
* Document Ready 
*/ 
$(function() 
{ 

    /* Initializes all plugins and events */ 
    tab.init(); 

}); 


var tab = (function (my, $) 
{ 

    my.init = function() 
    { 
     tab.preload(); 
     tab.dataTable.init(); 
     $('#tabs').tabs(); 
    }; 



return my; 

} (tab || {}, jQuery)); 

Answer 1

당신이 oDataTable를 호출하고 여러 가지 것 같다 시작 다른 모듈 클래스를 가지고 있고 그들은 모두에 액세스/할당 호환되지 않는 방법. 당신이있어

myTable.oDataTable = _fnSetupTable(); 

:

내가 볼 첫 번째 문제는 당신이 _fnSetupTable에서 반환을 시도합니다 oDataTable 값이 실제로으로 범위와 내부 함수에서 반환, 그래서 다음과 같은 과제가 아무것도하지 않습니다된다는 것이다 _fnSetupTable의 결과를 사용하려하지만 _ fnSetupTable은 실제로 아무 것도 반환하지 않습니다. 내부 기능은 수행합니다.

아마 더 큰 문제는 모듈 패턴을 사용하는 방법입니다. 당신의 예에서와 같이

var input = { 
    dataTable: "tab table" 
} 

var tab = (function (my, $) 
{ 
    // this var is local 
    var myTable = my.dataTable = my.dataTable || {}; 

    // creating a property on a local variable 
    myTable.oDataTable = {}; 

    // this is what's returned, but it has no access to myTable 
    return my; 

} (input)); 

console.log(tab) // does not have an oTableData property 

myTable라는 지역 변수가 생성되고 테이블 속성이 부여됩니다,하지만 반환되는 것은 my하지 myTable이다 : 나는 문제를 보여주기 위해 작은 예제를 만들려고 할 것입니다. 반환 된 my 개체에서 해당 속성에 액세스 할 수있게하려면 my에 할당해야합니다. 아니면 myTable을 반환하겠습니까?