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

Meteor template helper not working after using iron router

本文关键字：路由器 不起作用 流星      更新时间：2023-09-26

我是Meteor的新手，我刚刚在我的项目中安装了铁路由器。我的应用程序.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。

这是我在isMobile模板助手中使用的jQuery插件。

在我的应用程序.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>

这是我的路由器.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
        └── ...

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

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

所以像这样：

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

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

问题解决了。这是由于我没有初始化基金会。添加后，我的菜单工作正常：

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

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

感谢维勒姆和3thanZ的帮助。我真的很感激！

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

相关文章：