Question

我正在尝试将Ember中的现有模板用于谷歌地图infoWindow。 google.maps.InfoWindow方法将内容属性设置为HTML字符串的对象。

我想使用现有的Ember模板，我在我的应用程序的其他地方使用它作为infoWindow内容。我将模板转换为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

试一试。就在最近，我在自己的个人项目中开展了这项工作。

这是我的infoWindow View

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}}

使用Google Maps infoWindow的Ember模板

1 个答案: