Question

我发现铁：路由器导致错误。使用dburles：google-maps和iron：路由器包使这段代码有效。我的代码如下： template.js：

Router.configure({
layoutTemplate: 'layout'
});
if (Meteor.isClient) {
Router.route('/', function () {
    this.render('whatisHappening')
});
}
if (Meteor.isClient) {
Meteor.startup(function () {
    GoogleMaps.load({v: '3', libraries: 'places'});
});
Template.whatisHappening.helpers({
    mapOptions: function () {
        if (GoogleMaps.loaded()) {
            var input = document.getElementById('autocomplete');
            var autocomplete = new google.maps.places.Autocomplete(input,{types: ['geocode']});
            google.maps.event.addListener(autocomplete, 'place_changed', function () {
                console.log(autocomplete.getPlace())
            });
        }
    }
});
}

的layout.html

<template name="layout">
<a href="/">address search</a> |
    <a href="/x">some other page</a>
{{> yield}}
</template>

<template name="whatisHappening">
    <input type="text" id="autocomplete" placeholder="some address" size="50">
    {{mapOptions}}
</template>

如果我不使用这个铁：路由器不会抛出任何错误，它完美无缺。是这种错误还是我需要改进我的编码？

我怎么能发现包裹引起的这种错误？它浪费了我一整天。

Answer 1

我不会为此使用帮助器。在某些HTML中运行JS时，您永远无法确定已呈现的内容和不呈现的内容。我使用onRendered挂钩。

Template.whatisHappening.onRendered(function () {
  if (!GoogleMaps.loaded()) return false;
  var input = document.getElementById('autocomplete');
  var autocomplete = new google.maps.places.Autocomplete(input,{types: ['geocode']});
  google.maps.event.addListener(autocomplete, 'place_changed', function () {
    console.log(autocomplete.getPlace())
  });
});

Answer 2

我建议防御性地编码，你的助手可能被多次调用，在你的DOM渲染所有元素之前，早期调用就会进入。

Template.whatisHappening.helpers({
  mapOptions: function () {
    var input = document.getElementById('autocomplete');
    if (GoogleMaps.loaded() && input ) {
      var autocomplete = new google.maps.places.Autocomplete(input,{types: ['geocode']});
      google.maps.event.addListener(autocomplete, 'place_changed', function () {
        console.log(autocomplete.getPlace())
      });
    }
  }
});

Answer 3

我已经使用自动运行包装，它会反应性地更新DOM。

流星铁：路由器Uncaught TypeError：无法读取null的属性'value'

3 个答案: