MVC 부분 뷰 자바 스크립트

Question

부분적으로 재사용을 위해 생성 된 뷰가 있습니다. 이 부분보기에는 Chosen 플러그인을 사용하는 드롭 다운 목록이 있습니다. 따라서 부분보기에서 나는 문서를 준비하기 위해 자바 스크립트 코드와 함께 선택된 js/css 파일을 참조한다.

의도 한대로 작동합니다. 그러나 이제 버튼 클릭 이벤트에서 부분 뷰를 렌더링하는 페이지가 생겼습니다. 사용자는 원하는만큼 여러 번 클릭 할 수 있습니다.

제 걱정은 버튼을 클릭 할 때마다 중복 된 js가로드된다는 것입니다. 아마도 사람들이 Partial View에 js를 직접 추가하는 것을 권장하지 않는 이유 일 수 있습니다. 필자의 경우 Partial View 자체에서 플러그인과 조작이 필요합니다. 로드 된 js를 확인하고 후속 click 이벤트에서 다시로드하지 못하도록하는 좋은 방법이 있습니까?

Answer 1

Chosen의 JavaScript 및 CSS 파일은 페이지가 처음로드 될 때 페이지에 포함되어야합니다. 사용자가 버튼을 클릭하면 Ajax 호출을 만들어 부분을 포함시킵니다. AJAX 요청에 대한 성공 콜백에서 방금 삽입 된 드롭 다운 목록에 대한 Chosen 플러그인 코드를 초기화합니다.

중복 된 JS 및 CSS 파일이로드되는 것은 맞습니다. 이는 원하지 않는 것이 분명합니다.

$.ajax(...) 
    .done(function(data) { 
     $("#foo") 
      .html(data) 
      .find("select") 
      .each(function() { 
       $(this).chosen({...}); 
      }); 
    }); 

Answer 2

답변으로 내 의견을 확장하십시오.

여러 개의 CSS 파일을 남겨 둘 수 있습니다. 아무 문제가 없을 것이라고 생각합니다. JS 파일에 관해서는, 처음에 당신은 래퍼 파일을 생성해야합니다

wrapper.js

$(function() { 
     if (!$().chosen) { //we do this only if chosen is not present 
     var script = document.createElement('script'); 
     script.type = 'text/javascript'; 
     script.src = 'url to yor chosen library'; 

     $("body").append(script); 
     }  
}); 

그리고보기에 당신은 대신 chosen 라이브러리 경로의이 wrapper.js에게 파일을 참조 할 것 .