路径适用于台式机，但不能移动

我有一个响应的应用程序标签栏，我的建筑：路径适用于台式机，但不能移动

<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' 
    }); 
});

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

来源

2014-06-12 stewartmccoy

我们在谈论哪个移动浏览器？ –

@ChristianFritz它不适用于Xcode iOS模拟器或iPhone Mobile Safari或Chrome。 – stewartmccoy

路由问题：

卸下ratchet包修复对我来说。看起来棘轮使用它自己的模板之间的链接方式，这是不符合iron-router。删除棘轮删除UI元素，但路由在手机上工作：http://pp-groups-fixed.meteor.com。你可以使用严格的UI库，比如bootstrap来制作UI元素，或者甚至可以使用棘轮的UI组件。如果你想充分使用棘轮，你很可能不得不放弃IronRouter。

其他的事情来解决：

布局模板

当使用流星铁路由器，布局模板是常见的元素模板，放置一个{{> yield}}您要定期模板出现。

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

在您的代码中，常规模板被滥用为布局模板，因为它们中没有{{> yield}}。此外，tabNav模板正在使用铁路路由器放置，但您已将它包含在每个模板中，并带有{{> 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的。与scheduled-games.js和locationSet一样。看看模板。 templateName .helpers查看代码如何对应。

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

来源

2014-06-13 20:50:54

push.js组件导致此问题。您仍然可以通过禁用push.js在铁路路由器上使用Rachet。根据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>

来源

2014-09-12 14:26:02 benstr

路径适用于台式机，但不能移动

回答

路由问题：

其他的事情来解决：

布局模板

数据

相关问题