Question

我正在构建一个响应式应用的标签栏：

<template name="tabNav">
<nav class="bar bar-tab">
  <a class="tab-item" id="groups-nav" href="{{pathFor 'groupsList'}}">
    <span class="icon icon-star-filled"></span>
    <span class="tab-label">Groups</span>
  </a>
  <a class="tab-item active" id="games-nav" href="{{pathFor 'locationSet'}}">
    <span class="icon icon-list"></span>
    <span class="tab-label">Games</span>
  </a>
<!-- more code -->
</template>

pathFor'groupsList'适用于桌面，但不适用于移动设备。你可以在这里试试：pp-groups.meteor.com。

这只是原型，不使用任何实际数据。我的所有观看代码均可在此处获取：https://github.com/stewartmccoy/pp-groups/tree/master/groups/client/views

这些是我定义的路线：

Router.map(function() {
    this.route('layout', {
    path: '/',
    template: 'getLocation',
    layoutTemplate: 'getLocation',
    yieldTemplates: {
      'tabNav': {to: 'footer'}
    }
  });

  this.route('locationSet', {
    path: '/locationSet',
    template: 'locationSet',
    layoutTemplate: 'locationSet'
  });

  this.route('groupsList', {
    path: '/groupsList',
    template: 'groupsList',
    layoutTemplate: 'groupsList'
  });
});

为什么路径不适用于移动设备？（它至少不适用于Xcode iOS模拟器或iPhone Mobile Safari或Chrome）。

Answer 1

push.js组件导致了问题。您仍然可以通过禁用push.js将Rachet与Iron Router一起使用。根据rachet的文档，您可以通过在HTML链接中添加data-ignore标记来停用推送。

<!-- Use data-ignore="push" to prevent the push.js interception -->
<a href="http://www.google.com" data-ignore="push">Google<a>

Answer 2

路由问题：

删除ratchet包为我修复了它。看起来像棘轮使用它自己的模板之间的链接方式，这与iron-router不兼容。删除棘轮会删除UI元素，但路由可在移动设备上运行：http://pp-groups-fixed.meteor.com。您可以使用严格的UI库，例如bootstrap来制作UI元素，或者甚至可以使用棘轮的UI组件。如果你想完全使用棘轮，你很可能不得不放弃IronRouter。

要解决的其他问题：

布局模板

使用meteor和iron-router时，布局模板是一个包含常用元素的模板，其中{{> yield}}放置在您希望显示常规模板的位置。

您实际上只在代码中有一个真实的布局模板，在groups.html中有一个名为layout的布局模板，并且未使用。

在您的代码中，常规模板被误用为布局模板，因为它们中没有{{> yield}}。此外，tabNav模板使用iron-router进行放置，但您已使用{{> tabNav}}将其包含在每个模板中。

因此，您可以简单地删除铁路由器中的布局模板代码，您的应用程序仍将正常运行：

Router.map(function() {

  this.route('layout', {
    path: '/',
    template: 'getLocation',
    // layoutTemplate: 'getLocation',
    // yieldTemplates: {
    //   'tabNav': {to: 'footer'}
    // }
  });

  this.route('locationSet', {
    path: '/locationSet',
    template: 'locationSet',
    // layoutTemplate: 'locationSet'
  });

  this.route('groupsList', {
    path: '/groupsList',
    template: 'groupsList',
    // layoutTemplate: 'groupsList'
  });
});

更好的方法是取出所有常用代码，标题，页面的常规结构，标签栏，并将其放入布局模板中。添加要在其中呈现页面模板的{{> yield}}。请将路由器中的此布局模板命名为layoutTemplate。

另一个旁注，如果没有定义模板，iron-router会自动查找与路径同名的模板。因此，如果您正在撰写this.route('groupsList', ...，那么您也不需要撰写template: 'groupsList'。

数据

您的past-game.js文件应命名为get-location.js。是的，这个名字本身并不重要，但那是getLocation的免费代码，而不是postGame＆＃39; s。与scheduled-games.js和locationSet相同。查看Template。 templateName .helpers以查看代码如何对应。

当然，理想情况下，这些数据应该在一个集合中。现在，您可以使用数据作为全局变量创建一个单独的文件，而不是将数据创建为var的数组。只需定义为PastGames = [...]，然后使用模板助手返回所需的数据。

Path适用于桌面，但不适用于移动设备

2 个答案:

路由问题：

要解决的其他问题：

布局模板

数据