在 Meteor App 中使用 geocomplete

Question

请我尽快解决这个问题。我一直在尝试将 geocomplete 添加到我的 Meteor js 应用程序中，但不断出现错误。我已经通过 NPM 将 geocomplete 安装到 Meteor 应用程序中。我如何从那里使用它？或者是否有任何其他 Meteor 包已经实现了这个，因为我没有。我已尝试遵循此实现http://ubilabs.github.io/geocomplete/examples/form.html，但无法使其正常工作。

这是用户界面代码

<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

这是onrendered函数

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

试试这个，告诉我它是否有效

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

Answer 2

您收到错误是因为它无法找到 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"]
  });
});

确认它是否适合您。