ember 구성 요소에 동적으로 내용을 추가하는 방법

Question

처음으로 ember.js에 웹 응용 프로그램을 작성하고 있습니다. 응용 프로그램의 기본 페이지 인지도를 만들기 위해 ember-leaflet을 사용하고 있습니다. 지도는 구성 요소라는 기본 맵에 위치하고 있으며처럼 보이는 : 그것은 내 웹 사이트에있는 모든 경로에 존재하므로이 주요 맵 구성 요소가 내 application.hbs에 위치한

{{#leaflet-map lat=lat lng=lng zoom=zoom class="max-height" }} 

    {{#each availableBasemaps as |basemap|}} 
    {{#layer-group name=basemap.name default=basemap.default baselayer=true}} 
     {{tile-layer url=basemap.url attribution=basemap.attrib}} 
    {{/layer-group}} 
    {{/each}} 

    {{#each availableLayers as |lr|}} 
    {{#layer-group name=lr.name default=lr.default}} 
     {{wms-tile-layer url=lr.url version=lr.version layers=lr.layers format=lr.format styles=lr.styles transparent=lr.transparent}} 
    {{/layer-group}} 
    {{/each}} 

    {{layer-control handler=(action "layerControlEvent")}} 
{{/leaflet-map}} 

. 검색 주소라고하는 하나의 경로에서 사용자 입력을 기반으로지도에 마커를 추가해야합니다. 내지도에 이러한 마커를 추가하기 위해 내 검색 address.js 파일 내에서 기본 맵을 수정하는 방법이 필요합니다

{{#marker-layer location=Location}} 
    {{#popup-layer}} 
    <h4> My address </h4> 
    {{/popup-layer}} 
{{/marker-layer}} 

: 무언가 같이 마커는 볼 것이다. 엠버에서 어떻게 이것을 할 수 있습니까?

Answer 1

Ember의 application 컨트롤러에는 currentRouteName 속성이 있습니다. 따라서 언제든지 application.hbs 템플릿 또는 application.js 컨트롤러에서 현재 경로의 이름을 확인할 수 있습니다. 귀하의 경우에는, 당신의 application.js, 당신은 같은 계산 된 속성을 정의 할 수 있습니다

inSearchAddress: Ember.computed('currentRouteName', function(){ 
    return this.get('currentRouteName') === 'search-address'; 
}) 

그리고 당신의 application.hbs, 당신은 같은 {{main-map inSearchAddress=inSearchAddress}} 다음 구성 요소와 같은에서 사용하여 main-map 구성 요소에이 계산 된 속성을 전달할 수 있습니다 :

{{#if inSearchAddress}} 
    {{#marker-layer location=Location}} 
     {{#popup-layer}} 
      <h4> My address </h4> 
     {{/popup-layer}} 
    {{/marker-layer}} 
{{/if}} 

이 용도로는 twiddle을 살펴볼 수도 있습니다.

Answer 2

데이터를 저장하는 데 항상 locationService이라는 싱글 톤 서비스를 사용할 수 있습니다.

기존 목록에 위치를 추가하고 있습니까? 배열 말했다 단순히 pushObject 그 경로에서 {{#each locationService.locationsToRender as |location|}} {{#marker-layer location=location}} {{#popup-layer}} <h4> My address </h4> {{/popup-layer}} {{/marker-layer}} {{/each}}

그리고, : 그렇다면, 서비스 및 응용 프로그램 템플릿에서 말했다 locationsToRender에라는 일부 키가 있습니다. 다른 모든 핀 표시를 중지하고 해당 핀을 표시 할 경우

대신, 다른 모든 레이어를 숨 깁니다 몇 가지 변수를 전환 해당 서비스에 대한 몇 가지 기능을 가지고 그냥