meteor iron:router Uncaught TypeError: Cannot read property 'value' of null

Question

我发现 iron:router 导致了错误。使用 dburles:google-maps 和 iron:router 包使此代码工作。我的代码如下： 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>

如果我不使用这个 iron:router 它不会抛出任何错误，它工作得很好。是这种错误还是我需要改进编码？

我怎么能发现这种由包引起的错误？，这浪费了我一整天的时间。

Answer 1

我不会为此使用助手。当运行 JS 在一些 HTML 中间时，你永远无法确定什么已经渲染，什么没有。我会使用 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

我已经用 autorun 包裹起来，它会反应性地更新 DOM。

meteor iron:router Uncaught TypeError: Cannot read property 'value' of null

meteor iron:router Uncaught TypeError: Cannot read property 'value' of null

meteor

iron-router