路徑適用於臺式機，但不能移動

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

爲什麼沒有在移動設備上pathFor工作？ （它至少不能在Xcode iOS模擬器或iPhone Mobile Safari或Chrome上運行）。

Answer 1

路由問題：

卸下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 = [...]，然後使用模板助手返回您需要的數據。

Answer 2

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>