Question

我正在尝试在Iron Router渲染模板后加载javascript文件（使用IRLibloader）：

Router.configure({
  layoutTemplate: 'layout',
  loadingTemplate: 'loading',
});

Router.route('/', {
  name: 'landing',
  template: 'landing',
  onBeforeAction: function () {
    var googleAPI = IRLibLoader.load('http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false');
    var fancyInput = IRLibLoader.load('/js/fancyInput.js');
    var geoComplete;
    if(googleAPI.ready()){
      geoComplete = IRLibLoader.load('/js/jquery.geocomplete.min.js');
    }

    if(googleAPI.ready() &&
       fancyInput.ready() &&
       geoComplete.ready()){
      console.log('All ready');
      this.next(); // Render the page when all the libraries are ready

      // Testing this here
      if(Meteor.isClient){
        console.log("Meteor.isClient");
        IRLibLoader.load('/js/landing.js');
        // Set places autocomplete
        Template.landing.rendered = function(){
          $('section :input').val('').fancyInput()[0].focus();
          $('section :input').geocomplete();
          console.log("loading.js ejecutandose (after render)");
        }
      }
    }
  }
});

但是当我浏览localhost:3000时，布局会被渲染，googleAPI，fancyInput和geocomplete库也被加载，因为'all ready'消息在控制台上打印，并且landing.js也被加载（因为它加载背景图像，同时打印“Meteor.isClient”消息。

但是，“登陆”模板永远不会被渲染。它的内容不会出现，Template.landing.rendered内的控制台消息永远不会打印出来。这是template.js文件：

<template name="landing">
  <img id='logo' src="img/logos/logo.png">
  <div id='content'>
    <section class='input'>
      <div>
        <input type='text' placeholder='Type text here'>
      </div>
    </section>
  </div>
</template>

我还尝试使用onAfterAction加载landing.js，这似乎是在onBeforeAction之前根据Firebug控制台发生的。多奇怪啊！

我无法理解为什么没有加载模板，因为meteor控制台上没有出现错误。有什么想法吗？

编辑：如果删除布局，它确实有效，如下所示：

<template name="layout">
  <head>
    <title>Welcome to my app</title>
  </head>
</template>

这种布局有什么问题？

Answer 1

所以，我认为你可能会过度思考这一点。为什么不为这些库使用现有的包？除了明显更容易使用之外，一些第三方代码将被缩小到主应用程序js文件中，而不是发送额外的HTTP请求来下载它们。

例如，dburles:google-maps可以为您提供Google Maps API和您选择的额外库（可选择仅加载特定路线），jeremy:geocomplete可获取Geocomplete（自动安装该地图包）作为依赖）。请参阅jeremy：geocomplete README进行实施。

至于花式输入，为什么不create a simple Meteor package包装，所以你可以meteor add fancy-input？

此外，您的Template.landing.rendered回调不应位于onBeforeAction。理想情况下，它应该在其自己的文件中，包含着陆模板的其他代码。

Iron Router：在渲染模板后加载js脚本

1 个答案: