使用铁路由器后流星模板助手不工作

Question

我是 Meteor 的新手，我刚刚在我的项目中安装了 iron router。我的 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 模板，当用户使用 phone 时，我将显示 mobile_nav.

我在 isMobile 模板助手中使用的

This is the jQuery plugin。

在我的 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 块不工作。

在我开始使用 iron router 之前它工作正常。

我在这里错过了什么？

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

├── 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
        └── ...

Answer 1

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

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

所以像这样：

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

同时检查浏览器中的控制台，Iron Router 可能会出现一些错误

Answer 2

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

Answer 3

问题已解决。这是因为我没有初始化基础。添加后，我的菜单工作正常：

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

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

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

感谢 Villemh 和 3thanZ 的帮助。非常感谢！

使用铁路由器后流星模板助手不工作

Meteor template helper not working after using iron router

javascript

jquery

templates

meteor

meteor-helper