3

次のテンプレートがあります。

<template name="test">
  {{#isolate}}
    <div id="map_canvas" style="width:50%; height:50%"></div>
  {{/isolate}}
</template>

私の test.js では ( https://developers.google.com/maps/documentation/javascript/tutorial#HelloWorldから):

function initialize(){
  var mapOptions = {
    center: new google.maps.LatLng(-34.397, 150.644),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map($("#map_canvas")[0], mapOptions);
}

Template.test.rendered = function(){
    initialize();
  //*** The following is the workaround I am using:***
  // if (! this.initialized){
  //   initialize();
  //   this.initialized = true;
  // }
};

問題は、コメント付きのコード セクションに示されている回避策がないと、テンプレートが常に 2 回レンダリングされる (initialize() が実行されるため) ことです。これは、コンソール ログ (ログ コードはここには示されていません) に表示されるだけでなく、1 回点滅するマップからも表示されます (これは受け入れられません)。

その理由は、私が推測しているのは、次のイベントの発生によるものです。

  1. テンプレートがレンダリング$('#map_canvas')され、単純な div 要素として生成されます (マップは添付されていません)。
  2. Google マップ API は aync-ly を返し、変更し$('#map_canvas')ます。
  3. どういうわけか Meteor は変更を検出し、にもかかわらず、{{#isolate}}テンプレート全体をもう一度レンダリングすることを決定します (これはログに表示されます)。
  4. 内で initialize() が再度呼び出されますTemplate.test.rendered。

私の質問:

  1. なぜ？
  2. これが起こったのなら、Meteor が無限回ではなく 2 回しかレンダリングされないのはなぜですか?
  3. 解決？

3 つの質問、どうもありがとうございました。

4

1 に答える 1

4

{{> test}}再レンダリングを含む外部コンテキストが原因で、テンプレートがおそらく 2 回レンダリングされています。これが発生する理由はさまざまですが、通常は、最初はサブスクリプション データなしでレンダリングされ、次にデータがロードされたときにレンダリングされます。

{{#constant}}とにかく、あなたの特定のケースでは、.ではなく、Google マップのラッパーが必要だと思います{{#isolate}}。

注: (何らかの理由で) 周囲のコンテキストが再レンダリングされた場合、{{#constant}}領域は再レンダリングされます。ただし、新しいバージョンは DOM で置き換えられるのではなく、破棄されます。したがって、最初にrendered何かを行うだけにコールバックするように注意してください。

于 2012-11-12T05:51:25.420 に答える