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

【问题标题】：Path works on desktop, but not mobilePath 适用于桌面，但不适用于移动设备
【发布时间】：2014-09-12 22:26:02
【问题描述】：

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

<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>

'groupsList' 的 pathFor 可在桌面设备上使用，但在移动设备上不可用。你可以在这里试试：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'
  });
});

为什么 pathFor 不能在移动设备上运行？（它至少在 Xcode iOS 模拟器或 iPhone Mobile Safari 或 Chrome 上不起作用）。

【问题讨论】：

我们在谈论哪些移动浏览器？
@ChristianFritz 它在 Xcode iOS 模拟器或 iPhone Mobile Safari 或 Chrome 上不起作用。

标签： meteor iron-router

【解决方案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>

【讨论】：

【解决方案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}} 将它包含在每个模板中。

因此，您可以简单地摆脱您的 Iron 路由器中的布局模板代码，您的应用仍然可以运行：

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}}。参考您路由器中的 this 布局模板layoutTemplate。

另一个旁注，iron-router 如果没有定义模板，则会自动查找与路由同名的模板。所以如果你写的是this.route('groupsList', ...，你也不需要写template: 'groupsList'。

数据

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

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

【讨论】：