Backbone.js 컬렉션의 전단지 마커?

Question

backbone.js 및 전단지를 기반으로 응용 프로그램을 작성하려고합니다. 사용자는지도를 드래그하여지도에서 마커를 볼 수 있습니다. 마커를 클릭하여 선택할 수 있습니다. 선택하면 아이콘과 마커 상세 정보를 (팝업이 아님) 변경해야합니다.

이

마커 모델은 위도, 경도 유형, 제목, 에 isSelected이

지도 모델에 포함 된 포함 :

내 백본 모델은 여러 기관으로 구성되어지도, 마커 수집, 의 센터 선택한 마커

누구나 이런 종류의 기능을 만들 수있는 아이디어가 있습니까? 백본보기로 전단지 마커를 만들려면 어떻게해야합니까?

Answer 1

백본보기 및 리플릿 개체 모델은 마커가 Backbone.View.el 인 DOM 요소 내에 포함되어 있지 않기 때문에 완벽하지 않습니다. 마커 do에는 물론 (marker._icon을 통해 액세스 할 수있는 요소가 있지만) 마커가지도에 렌더링 될 때까지 존재하지 않습니다.

, 당신은 단지 events 또는 el 관련 기능을 사용할 수 없습니다 당신은은 백본 전망 마커를 표시 할 수 , 말했다. 나는 같은 "문제"가있는 OpenLayers를 사용하여 유사한 뷰를 성공적으로 구현했으며 제대로 작동합니다.

나는이 코드로 설명하는 것이 가장 쉬운 방법이라고 생각 :

//MarkerView has no element 
App.Views.MarkerView = Backbone.View.extend({ 

    initialize: function(options) { 
     //pass map instance to the marker 
     this.map = options.map; 
     //create the marker object 
     this.marker = L.marker([this.model.get('longitude'), this.model.get('latitude')]); 
    }, 

    render: function() {  
     //append marker to the map 
     this.marker.addTo(this.map); 

     //can't use events hash, because the events are bound 
     //to the marker, not the element. It would be possible 
     //to set the view's element to this.marker._icon after 
     //adding it to the map, but it's a bit hacky. 
     this.marker.on('click', this.onClick); 
    }, 

    onClick: function() { 
     alert("click"); 
    } 
}); 

//MapView renders a map to the #map element 
App.Views.MapView = Backbone.View.extend({ 
    id:"#map", 
    render: function() { 
     //render map element 
     var map = this.map = L.map(this.$el.attr('id')) 
      .setView([this.model.get('centerLon'), this.model.get('centerLat') ], 13) 
      .addLayer(L.tileLayer(this.model.get('layerUrl'), { maxZoom: 18 })); 

     //render each marker 
     this.markerViews = this.model.get('markers').map(function(marker) { 
      return new App.Views.MarkerView({model:marker, map:map}).render(); 
     }); 
    } 
}); 

Here's a demo on JSFiddle.