MVC 부분 뷰에서 jquery 선택기를 사용하는 방법은 무엇입니까?

Question

나는 수정하려는 주소 모델의 가변 길이 모음을 가지고 있습니다. 나는 컬렉션을 편집하기 위해 Steve Sandersons 접근법을 사용한다.

잘 작동하는 버튼 클릭으로 EditAddress 부분 뷰 (RenderPartial)를 Ajax를 통해 추가한다.

이 부분보기에는지도의 주소를 지적 할 수있는 Google지도 '컨트롤'이 포함되어 있습니다. 지도를 초기화하려면지도가 나타나길 원하는 div 요소의 ID를 전달해야합니다. 따라서 부분보기에서 id가 "#map"이라고 말한 div를 정의한 다음 jquery를 통해 Google지도 초기화 프로그램에 전달합니다 (스크립트 부분 뷰에 상주 함).

이제는 이러한 부분 뷰가 여러 개 추가되어 페이지의 여러 '#map'div가 생성됩니다 (소스를 볼 때 페이지가 잘 렌더링되지만 요소가 아약스를 통해 추가되는 것을 보지 못합니다). 나는 이드가 똑같을 것이라고 추측하고있다.) jquery를 연결하기 위해 올바른 id의 요소를 선택하는 방법은 무엇인가?

만약 내 선택이 전혀 없다면?

Answer 1

id 선택기를 사용하지 마십시오. 클래스 선택기와 같은 다른 용도를 사용하십시오.

var map = new google.maps.Map($('.map')[0], myOptions); 

지도 선택기가 여러 개인 경우지도 선택 도구가 포함 된 목록 요소를 반복하고 각각을 개별적으로 초기화 할 수 있습니다.

$('.map-listing-element').each(function(){ 
    var mapElement = $(this).find('.map-canvas'); 
    var options = {...}; // whatever the options are 
    var googleMap = new google.maps.Map(mapElement[0], options); 
}); 

<div class="this-box-wraps-all-maps"> 
    <div class="map-listing-element"> 
     ...load your partial views wrapped in this element 
     Map 1 
     <div class="map-canvas"></div> 
    </div> 
    <div class="map-listing-element"> 
     ...load your partial views wrapped in this element 
     Map 2 
     <div class="map-canvas"></div> 
    </div> 
    <div class="map-listing-element"> 
     ...load your partial views wrapped in this element 
     Map 3 
     <div class="map-canvas"></div> 
    </div> 
    <div class="map-listing-element"> 
     ...load your partial views wrapped in this element 
     Map N 
     <div class="map-canvas"></div> 
    </div> 
</div>