流星火焰：不渲染父

與Blaze播放前等待子模板渲染我實現了以下內容：如果我有一個父模板，其中包括我與{{> child_template }}子模板流星火焰：不渲染父

然後大火將等待子模板在呈現父級之前呈現。在某些情況下，這可能很好，但不是全部。

例如，如果我的父母模板包含<h1>Welcome to my page</h1>，並且孩子包含10000個項目的列表。我想辦法儘快展示<h1>，等待10000項出現後

我在做什麼目前管理了下面的：

Template.parent.onRendered(function(){ 
    Blaze.render(Template.child, document.body); 
});

它是工作，但我不知道是否任何人都有更好的解決方案，這個問題似乎很常見。謝謝

來源

2017-06-14 fadomire

你可以通過自定義布爾'canRender'參數是的'默認FALSE'子組件，但父組件的'onRendered'套它'真的'。而子組件應該檢查這個參數，除非它是「真」，否則不會渲染任何東西。 – aedm

@aedm這是一個答案，而不是評論。 – chazsolo

@aedm感謝這實際上似乎是我所瞭解的共同架構 – fadomire

你可以通過自定義布爾參數到子組件這是false默認，但父組件的onRendered設置爲真。而子組件應該檢查這個參數，除非是true，否則不會渲染任何內容。

Template.parent.onCreated(function() { 
    this.state = new ReactiveDict(); 
    this.state.setDefault({ 
    "canRender": false, 
    }); 
} 

Template.parent.onRendered(function() { 
    this.state.set("canRender", true); 
} 

Template.parent.helpers({ 
    canRender() { 
    return Template.instance().state.get("canRender"); 
    } 
});

通過國家到子組件：

<template name="parent"> 
    {{>child canRender=canRender}} 
</template> 

<template name="child"> 
    {{#if canRender}} 
    <p>Millions of items go here.</p> 
    {{/if}} 
</template>

來源

2017-06-26 16:44:02 aedm

正如你所說，你的子模板有一個10000個項目的列表。所以，這意味着你已經訂閱了一些收藏。你可以通過下面的代碼來解決你的問題。

<template name="Parent"> 
    <div> 
     <h1>Welcome to my page</h1> 
    </div> 
    {{#if Template.subscriptionsReady}} 
    {{> Child}} 
    {{else}} 
    <p>Loading Child Items...</p> 
    {{/if}} 
</template>

來源

2017-06-14 14:35:11

實際上10000個項目的列表可以來自訂閱或不訂閱。但是謝謝 – fadomire

流星火焰：不渲染父

回答

相關問題