流量路由器頁腳在數據加載之前閃爍到頂部

我正在使用流路由器加載數據網格，但是當我查看頁面時，頁腳始終在數據加載之前閃爍到頂部。解決這個問題的最好方法是什麼？流量路由器頁腳在數據加載之前閃爍到頂部

這裏是路線：

AdminRoutes.route('/dashboard', { 
    name: 'adminDashboard', 
    action() { 
    BlazeLayout.render('AppLayout', {page: 'AdminDashboard'}); 
    } 
});

這裏是js文件：

import { Template } from 'meteor/templating' 
import Stores from '../../../../api/stores/stores.js' 

import './AdminDashboard.html' 

Template.AdminDashboard.onCreated(function() { 
    var self = this; 
    self.autorun(function() { 
    self.subscribe('stores.names.links'); 
    }); 
}); 

Template.AdminDashboard.helpers({ 
    stores: function() { 
    return Stores.find(); 
    } 
});

下面是HTML佈局文件：

<template name='AppLayout'> 

    {{#if Template.subscriptionsReady}} 

    {{> Header }} 

    {{> Template.dynamic template=page}} 

    {{> Footer }} 

    {{/if}} 

</template>

這裏是儀表板的html文件：

<template name='AdminDashboard'> 
    <div class='admin-dashboard-page'> 

    <section class='stores-grid'> 
     {{#each stores}} 
     <div class='store'> 
      <h2 class='store-name'>{{name}}</h2> 
      <a href='/admin/dashboard/{{link}}' class='store-button'>Edit</a> 
     </div> 
     {{/each}} 
    </section> 

    </div> 
</template>

來源

2016-07-14 Rheisen

我想嘗試在.stores-grid負載後顯示頁腳。創建一個reactiveVar，其中加載數據時設置爲true的處理程序將其返回值並將其返回給幫助程序，然後將頁腳包裝在模板的if塊中。

這將是像下面這樣...

首先創建一個虛假的值reactiveVar：當收集加載到true

Template.AdminDashboard.onCreated(function() { 
    this.isDataLoaded = new ReactiveVar(false); 
    var self = this; 
    self.autorun(function() { 
    self.subscribe('stores.names.links'); 
    }); 
});

設定值：

Template.AdminDashboard.helpers({ 
    stores: function() { 
    let data = Stores.find() 
    if(data) { 
     Template.Instance().isDataLoaded.set(true) 
     } 
    return data ; 
    }, 

    dataLoaded: function() { 
    return Template.Instance().isDataLoaded.get(); 
    } 
});

最後，包裹您的頁腳，使其僅在加載數據後才顯示：

<template name='AppLayout'> 
    {{#if Template.subscriptionsReady}} 
    {{> Header }} 
    {{> Template.dynamic template=page}} 
    {{#if dataLoaded}} 
     {{> Footer }} 
    {{/if}} 
    {{/if}} 
</template>

來源

2016-07-14 17:01:38 JaimeVelasco

你是怎麼做的？ – Rheisen

編輯第一個答案，希望它有幫助！ – JaimeVelasco

它看起來像頁腳不再顯示和Template.Instance需要Template.instance不會得到錯誤的第一位 – Rheisen

一個簡單的修復方法是在您的內容將被加載到的div上設置最小高度，在內容加載時將頁腳向下推。這可能會或可能不會爲您工作，具體取決於您的內容的預期高度。

您也可以在數據加載時安裝加載屏幕/動畫以隱藏頁腳。

來源

2016-07-15 22:07:14 Sauce

流量路由器頁腳在數據加載之前閃爍到頂部

回答

相關問題