JavaScript에서 모듈 패턴을 사용할 때 DOM 요소를 어떻게 참조합니까?

Question

캡슐화 된 JavaScript 객체에서 DOM 요소의 값을 얻으려면 어떻게해야합니까? 이것은 작동하지 않습니다. 나는 정의되지 않은 것을 얻지 못한다. 페이지가 렌더링되지 않아서 보지 못했지만, .ready 함수에 넣었고 계속 정의되지 않습니다.

$(document).ready(function() { 
 
    GetLoans = { 
 
    myModal: function() { 
 
     return document.querySelector("#myModal") 
 
    }, 
 
    myModalBody: function() { 
 
     return document.querySelector(".modal-body") 
 
    }, 
 
    getNewLoans: function() { 
 
     var xhr; 
 
     xhr = new XMLHttpRequest(); 
 
     var url = "/api/books"; 
 
     xhr.open("GET", url, true); 
 
     xhr.responseType = 'json'; 
 
     xhr.send(null); //or your data 
 
     xhr.onreadystatechange = function() { 
 
      if (xhr.readyState == 4 && (xhr.status == 200)) { 
 
      var result = xhr.response; 
 
      for (var key in result) { 
 
       if (result.hasOwnProperty(key)) { 
 
       //console.log(result[key].patron_id); 
 
       this.myModalBody.innerHTML = result[key].patron_id; 
 
       } 
 
      } 
 
      } 
 
     } 
 
     // var serverResponse = xhr.responseText; 
 
     // this.myModalBody.innerHTML = serverResponse; 
 
    }, 
 
    bindUIActions: function() { 
 
     // this.myModalBody.addEventListener("click", this.getNewLoans(), false); 
 

 
    }, 
 
    init: function() { 
 
     this.getNewLoans(); 
 
     //this.bindUIActions(); 
 

 
    } 
 
    }; 
 
    GetLoans.init(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Modal --> 
 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> 
 
     </button> 
 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     ... 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     <button type="button" class="btn btn-primary">Save changes</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Uncaught TypeError: Cannot set property 'innerHTML' of undefined 
    at XMLHttpRequest.xhr.onreadystatechange 

없음 jQuery를은 (예, 나는 내가 Document.Ready 기능을 사용하고 알고있다.) 제발 먼저

Answer 1

, 당신은 참조하는 this 객체가 바인드의 귀하의 모듈에 올바르게. 사용중인 기능이 액세스해야하는 기능과 동일한 범위에 있으므로 호출에서 this에 대한 참조를 제거하십시오. 당신이 쓸 때 당신이 실제로 이러한 메소드를 호출하지 않는,

myModalBody: function() { 
    return document.querySelector(".modal-body") 
} 

myModal: function() { 
    return document.querySelector("#myModal") 
} 

:하지만

this.myModalBody.innerHTML = result[key].patron_id; 

당신은 쓸 필요가 :

당신은 DOM 참조를 얻을 모듈 방법이 있나요

myModalBody().innerHTML = result[key].patron_id; 

함수가 호출되고 함수의 반환 값이 사용됩니다.

호출 괄호가 없으면 존재하지 않는 innerHTML이라는 myModalBody 함수/개체의 속성을 찾고 있습니다.

또한, 이벤트 배선 코드에서, 당신은 : 그것은 바로 AJAX 호출의 결과로 이벤트 핸들러를 일으키는 원인이되는 메소드를 호출하기 때문에

this.myModalBody.addEventListener("click", this.getNewLoans(), false); 

괄호를 포함하지 않아야 어떤 (인 가장 가능성이 함수, 그렇지?). 시도 :

myModalBody.addEventListener("click", getNewLoans, false); 

$(document).ready(function() { 
 
    GetLoans = { 
 
    myModal: function() { 
 
     return document.querySelector("#myModal") 
 
    }, 
 
    myModalBody: function() { 
 
     return document.querySelector(".modal-body") 
 
    }, 
 
    getNewLoans: function() { 
 
     var xhr; 
 
     xhr = new XMLHttpRequest(); 
 
     var url = "/api/books"; 
 
     xhr.open("GET", url, true); 
 
     xhr.responseType = 'json'; 
 
     xhr.send(null); //or your data 
 
     xhr.onreadystatechange = function() { 
 
      if (xhr.readyState == 4 && (xhr.status == 200)) { 
 
      var result = xhr.response; 
 
      for (var key in result) { 
 
       if (result.hasOwnProperty(key)) { 
 
       //console.log(result[key].patron_id); 
 
       myModalBody().innerHTML = result[key].patron_id; 
 
       } 
 
      } 
 
      } 
 
     } 
 
     var serverResponse = xhr.responseText; 
 
     myModalBody().innerHTML = serverResponse; 
 
    }, 
 
    bindUIActions: function() { 
 
     myModalBody().addEventListener("click", getNewLoans, false); 
 

 
    }, 
 
    init: function() { 
 
     this.getNewLoans(); 
 
     //this.bindUIActions(); 
 

 
    } 
 
    }; 
 
    GetLoans.init(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Modal --> 
 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
 
    <div class="modal-dialog" role="document"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> 
 
     </button> 
 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     ... 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     <button type="button" class="btn btn-primary">Save changes</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>