流星火焰：不渲染父

与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

流星火焰：不渲染父

回答

相关问题