在Meteor App中使用geocomplete

Question

求求你，我很快就需要解决这个问题了。我一直在尝试将geocomplete添加到我的Meteor js应用程序中，但一直收到错误。我已经通过NPM将geocomplete安装到Meteor应用程序中。我如何在那里使用它？或者有没有其他的Meteor包实现了这一点，因为我没有。我试着遵循这个实现http://ubilabs.github.io/geocomplete/examples/form.html，但是不能让它工作。

这是UI代码

<template name="geos">
    <div class="form-group">
        <input id="geocomplete" type="text" class="form-control" placeholder="Type in an address" value="Lekki Phase" style="width: 100%;" />
    </div>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCWz0jrRG2GoQ&libraries=places"></script>
<script src="/js/jquery.geocomplete.js"></script>
</template>

NPM安装

C:\Programs\contract\schoolapps>npm install geocomplete
npm WARN deprecated uglifyjs@2.4.11: uglifyjs is deprecated - use uglify-js instead.
npm WARN prefer global marked@0.3.6 should be installed with -g
schoolapps@ C:\Programs\contract\schoolapps
`-- geocomplete@1.7.0
  +-- docco@0.6.3
  | +-- commander@2.9.0
  | | `-- graceful-readlink@1.0.1
  | +-- fs-extra@3.0.1
  | | +-- graceful-fs@4.1.11
  | | +-- jsonfile@3.0.0
  | | | `-- graceful-fs@4.1.11  deduped
  | | `-- universalify@0.1.0
  | +-- highlight.js@9.11.0
  | +-- marked@0.3.6
  | `-- underscore@1.8.3
  `-- uglifyjs@2.4.11

这是最终呈现的函数

Template.SchoolContactLayout.rendered = function () {
    $(function(){
          $("#geocomplete").geocomplete({
          map: ".map_canvas",
          details: "form",
          types: ["geocode", "establishment"],
        });
     });
}

我在控制台上得到了这个错误

Exception from Tracker afterFlush function:
meteor.js?hash=27829e9…:930 TypeError: $(...).geocomplete is not a function
    at HTMLDocument.<anonymous> (schoolcontact.js:25)
    at fire (jquery.js?hash=c57b3cf…:3201)
    at Object.self.add [as done] (jquery.js?hash=c57b3cf…:3247)
    at jQuery.fn.ready (jquery.js?hash=c57b3cf…:3481)
    at jQuery.fn.init (jquery.js?hash=c57b3cf…:2921)
    at jQuery (jquery.js?hash=c57b3cf…:131)
    at Template.SchoolContactLayout.rendered (schoolcontact.js:2)
    at blaze.js?hash=f33d3df…:3398
    at Function.Template._withTemplateInstanceFunc (blaze.js?hash=f33d3df…:3744)
    at fireCallbacks (blaze.js?hash=f33d3df…:3394)

我该怎么做才能让它正常工作？

Answer 1

你得到这个错误是因为它不能找到dom，并且它把它当作一个流星函数。您应该在dom呈现后调用该方法，并在此之前使用'this‘关键字来指向dom存在的模板实例，以便jquery考虑它。

Template.SchoolContactLayout.onRendered(function(){
  // we're using the template instance scoped jQuery

this.$("#geocomplete").geocomplete({

      map: ".map_canvas",
      details: "form",
      types: ["geocode", "establishment"]
  });
});

确认它是否对您有效。

Answer 2

Template.SchoolContactLayout.onCeated(function () {
          $("#geocomplete").geocomplete({
          map: ".map_canvas",
          details: "form",
          types: ["geocode", "establishment"],
        });
     });