Ember with Google Maps infoWindow

Question

Google지도 infoWindow에서 사용하려면 Ember에서 기존 템플릿을 가져 오려고합니다. google.maps.InfoWindow 메서드는 content 속성이 HTML 문자열로 설정된 객체를 사용합니다.

내 응용 프로그램의 다른 곳에서 infoWindow 콘텐츠로 사용하는 기존 Ember 템플릿을 사용하고 싶습니다. 템플릿을 HTML 문자열로 변환하는 데 문제가 있습니다.

나는 다음과 같은 방법을 시도 :

Ember.Handlebars.compile(templateName)(model.get('data')); 
// Uncaught TypeError: Cannot read property 'push' of undefined 

Ember.TEMPLATES[templateName](model.get('data')); 
// Uncaught TypeError: Cannot read property 'createChildView' of undefined 

이 모든 didInsertElement 방법에 내지도보기에서 수행되고있다.

대안은 HTML 문자열을 만들고 뷰에서 수동으로 변수를 전달하는 것입니다. 그러나 그것은 지저분하고 동일한 템플릿의 두 버전을 유지해야합니다.

달성하려는 목표에 대한 올바른 접근 방법은 무엇입니까?

Answer 1

시험해보세요. 최근에 내 개인 프로젝트에서이 작업을 수행했습니다.

여기

Ember.View.extend({ 
init: function() { 
    this._super(); 
    this.get('parentView').registerInfoWindow(this); 

    this.get('googleInitializer.library').then(function() { 

     this.set('infoWindow', new google.maps.InfoWindow({ 
      content: $('<div></div>')[0] 
     })); 

     google.maps.event.addListener(this.get('infoWindow'), 'closeclick', function() { 
      this.set('open', false); 
     }.bind(this)); 

    }.bind(this)); 
}, 
classNames: 'hidden', 
tagName: 'div', 
map: Ember.computed.alias('parentView.map'), 
marker: Ember.computed.alias('parentView.marker'), 
infoWindow: null, 
open: false, 

onOpenChange: function() { 
    if (this.get('infoWindow')) { 

     if (this.get('open')) { 
      this.get('infoWindow').open(this.get('map'), this.get('marker')); 
     } else { 
      this.get('infoWindow').close(); 
     } 

    } 
}.observes('open'), 
detachedDom: null, 
onWindowContentReady: function() { 
    if (this.get('infoWindow') && this.get('detachedDom')) { 
     this.get('infoWindow').setContent(this.get('detachedDom')); 
    } 
}.observes('infoWindow', 'detachedDom'), 
didInsertElement: function() { 
    this.set('detachedDom', this.$().detach()[0]); 
} 
}); 

은 본질적으로 여기에 무슨 일이 일어나고 있는지 나는 즉시 그 생성 된 DOM을 분리하고있어 것입니다 내 정보창보기입니다. 나중에 infoWindow가 준비되면 infoWindow의 내용을 설정합니다. html이 렌더링되고 버튼 액션 이벤트가 유지됩니다. 더 이상 고급 ember 바인딩을 시도하면 어떻게 될지 잘 모르겠습니다. 나는이 일을하고있어, 그래서 나는 내 자신을 들여다보고있다.

이런 식으로 일을의 장점은, 내가이이

{{#view 'google-maps' markers=fixtureCollection}} 
    {{#with view.markerController}} 
     {{#each}} 
      {{#view 'marker' coords=this}} 
       {{#view 'infoWindow'}} 
        <div> 
         <h2>Hello World</h2> 
         <button {{action 'doSomething'}}>Foo</button> 
        </div> 

       {{/view}} 
      {{/view}} 
     {{/each}} 
    {{/with}} 
{{/view}}