简体   繁体   English

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

[英]Meteor template helper not working after using iron router

I'm new to Meteor and I just installed iron router to my project. 我是Meteor的新手,我刚刚在项目中安装了铁路由器。 I have this inside my application.js file: 我的application.js文件中有这个:

if (Meteor.isClient) {

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

}

The isMobile helper will be used inside my nav template like this: isMobile帮助器将在我的nav模板中使用,如下所示:

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

What I'm doing here is, I'm loading 2 different sets of navigation. 我在这里所做的是,我正在加载2组不同的导航。 If the user is using desktop or tablet, I'm going to show desktop_nav template and when the user is using phone, I'm going to show mobile_nav . 如果用户使用的是台式机或平板电脑,我将显示desktop_nav模板,而当用户使用的电话时,我将显示mobile_nav

This is the jQuery plugin that I use inside the isMobile template helper. 这是我在isMobile模板助手中使用的jQuery插件

Inside my application.html file, I have this: 在我的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>

And this is my router.js file: 这是我的router.js文件:

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

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

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

My problem right now is, the isMobile template helper doesn't work. 我现在的问题是, isMobile模板助手不起作用。 The nav template is loaded but the if else block is not working. nav模板已加载,但if else块不起作用。

It was working fine before I start using iron router. 在开始使用铁路由器之前,它工作正常。

What am I missing here? 我在这里想念什么?

Note, this is my project structure tree: 注意,这是我的项目结构树:

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

You should render the templates into your layout. 您应该将模板渲染到布局中。 Here is a good tutorial that can help you. 这是一个很好的教程,可以为您提供帮助。

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

So something like this: 所以像这样:

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

Also check the console in the browser, it might have some errors from Iron Router 还要检查浏览器中的控制台,它可能来自Iron Router某些错误

Problem solved. 问题解决了。 It was due I'm not initializing the foundation. 这是由于我没有初始化基础。 After I add it, my menu works fine: 添加后,我的菜单可以正常工作:

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

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

Another important thing to keep in mind is, $(this).foundation(); 要记住的另一重要事项是$(this).foundation(); doesn't work. 不起作用。 Only $(document).foundation(); $(document).foundation(); works. 作品。 I've no idea what's the differences between $(this) and $(document) in this context. 我不知道在这种情况下$(this)$(document)什么区别。

Thank Villemh and 3thanZ for the help. 感谢Villemh和3thanZ的帮助。 I really appreciate it! 我真的很感激!

Could it be that the isMobile jQuery plugin is interfering with your isMobile helper function? 可能是isMobile jQuery插件干扰了您的isMobile帮助器功能吗? Did you try renaming your isMobile helper function to something else? 您是否尝试过将isMobile帮助器功能重命名为其他功能? And perhaps do a console.log(isMobile.tablet, isMobile.phone) from your helper function to make sure that it is being called? 也许从您的助手函数中获取console.log(isMobile.tablet, isMobile.phone)以确保它被调用了吗?

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM