使用铁路由器后流星模板助手不起作用答案

【问题标题】：Meteor template helper not working after using iron router使用铁路由器后流星模板助手不起作用
【发布时间】：2016-05-04 00:57:01
【问题描述】：

我是 Meteor 的新手，我刚刚在我的项目中安装了 Iron 路由器。我的 application.js 文件中有这个：

if (Meteor.isClient) {

  Template.nav.helpers({
    isMobile: function(){
      if(isMobile.tablet) {
        return false;
      } else if(isMobile.phone) {
        return true;
      } else {
        return false;
      }
    }
  });

}

isMobile 助手将在我的nav 模板中使用，如下所示：

<template name="nav">
...
  {{#if isMobile}}
    {{> mobile_nav}}
  {{else}}
    {{> desktop_nav}}
  {{/if}}          
...
</template>

我在这里所做的是，我正在加载 2 组不同的导航。如果用户使用台式机或平板电脑，我将显示desktop_nav 模板，当用户使用手机时，我将显示mobile_nav。

This is the jQuery plugin，我在 isMobile 模板助手中使用。

在我的 application.html 文件中，我有这个：

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <title>Example</title>
</head>

<body>
</body>

<template name="main">
    {{> nav}}   
        {{> yield}}
    {{> footer}}
</template>

这是我的 router.js 文件：

Router.configure({
    layoutTemplate: 'main'
});

Router.route('/', 'home');

Router.route('/about', 'about');

我现在的问题是，isMobile 模板助手不起作用。 nav 模板已加载，但 if else 块不起作用。

在我开始使用铁路由器之前它工作正常。

我在这里错过了什么？

注意，这是我的项目结构树：

├── application.css.scss
├── application.html
├── application.js
├── client
│   ├── javascripts
│   │   ├── isMobile.min.js
│   │   └── router.js
│   ├── stylesheets
│   │   └── ...
│   └── views
│       ├── about.html
│       ├── home.html
│       ├── home.js
│       └── layouts
│           ├── desktop_nav.html
│           ├── footer.html
│           ├── mobile_nav.html
│           └── nav.html
└── public
    ├── fonts
    │   └── ...
    └── images
        └── ...

【问题讨论】：

将 console.log(isMobile) 作为 isMobile 辅助函数的第一行。如果它不是“未定义的”，那么 isMobile jQuery 插件就可以工作。我试过了，它应该可以工作，所以我的猜测是其他问题。要获得具体答案，需要您的示例项目。

标签： javascript jquery templates meteor meteor-helper

【解决方案1】：

问题解决了。这是由于我没有初始化基础。添加后，我的菜单运行良好：

Template.desktop_nav.onRendered(function(){
    $(document).foundation();
});

Template.mobile_nav.onRendered(function(){
    $(document).foundation();
});

要记住的另一件重要事情是，$(this).foundation(); 不起作用。只有$(document).foundation(); 有效。在这种情况下，我不知道$(this) 和$(document) 之间有什么区别。

感谢 Villemh 和 3thanZ 的帮助。我真的很感激！

【讨论】：

【解决方案2】：

会不会是 isMobile jQuery 插件干扰了您的 isMobile 辅助函数？您是否尝试将您的 isMobile 辅助函数重命名为其他名称？也许从您的辅助函数中执行console.log(isMobile.tablet, isMobile.phone) 以确保它被调用？

【讨论】：

【解决方案3】：

您应该将模板渲染到您的布局中。这是一个很好的教程，可以帮助你。

http://iron-meteor.github.io/iron-router/#rendering-templates-into-regions-with-javascript

所以是这样的：

Router.route('/', function () {
  this.render('main');
});

还要检查浏览器中的控制台，它可能有来自 Iron Router 的一些错误

【讨论】：

这对我不起作用。在 JS 控制台中没有发现错误。
这很奇怪..如果可以的话，也许你可以提供一些代码仓库，它会更容易理解。