Question

我是Meteor的新手，我刚刚为我的项目安装了铁路由器。我在 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>

我在这里做的是，我正在加载两组不同的导航。如果用户使用的是桌面设备或平板电脑，我会显示desktop_nav模板，当用户使用手机时，我会显示mobile_nav。

我在isMobile模板助手中使用的

{{3}}。

在我的 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
        └── ...

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

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

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

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

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

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

Answer 3

可能是isMobile jQuery插件干扰了你的isMobile辅助函数吗？您是否尝试将isMobile帮助程序功能重命名为其他功能？也许从你的帮助函数中做一个console.log(isMobile.tablet, isMobile.phone)来确保它被调用？

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

3 个答案: