Eu literalmente andei por aí tentando fazer o Google Maps funcionar bem com o Meteor. Tudo estava indo muito bem até que eu quis usar um modelo de guiador para mostrar informações sobre um marcador selecionado no mapa. Cada vez que os dados da sessão eram atualizados, porque um marcador foi clicado, o sub-modelo para as informações do marcador seria atualizado e chutaria o modelo principal (contendo o Google Map) para a atualização, perdendo qualquer tipo de boa transição (quando você clica no marcador a janela de visualização gira para centralizá-la). De qualquer forma, depois de muita confusão, incluindo tentar renderizar o sub-template usando jQuery (Deus me livre), encontrei duas coisas realmente úteis que não havia encontrado antes.
Constante
{{#constant}}
<div class="row" style="height:300px" id="map-canvas-sm"></div>
{{/constant}}Este ajudante voodoo Handlebar garante que a seção definida não seja atualizada , mesmo se for parte de um modelo que é atualizado … voodoo!
Template.foo.rendered
Template.map.rendered = function() {
if(!this.rendered){
//Stuff here is run on first render only.
var map = getMap("map-canvas-sm", false);
setTypeAhead("place-search", map);
this.rendered = true;
}
}Em seguida, você precisa garantir que o JS que configura o Google Map não seja executado várias vezes. Eu costumo colar esse tipo de coisa na função Template.foo.rendered , mas obviamente isso é acionado toda vez que o modelo é atualizado. Eu tinha lido sobre Template.foo.created, mas isso é problemático porque o modelo ainda não foi desenhado, então você não pode fazer nada relacionado ao DOM. Para usar a função renderizada , mas apenas uma vez, basta inserir uma variável no Modelo assim que souber que ela foi renderizada pela primeira vez. Eu usei ‘renderizado’, mas realmente poderia ser qualquer coisa.
É provável que todos saibam sobre isso, mas eu não, então também há uma chance de que alguém ache isso útil!