带有流星和铁路由器的Yield模板

时间:2014-03-23 00:49:32

标签: javascript meteor iron-router

我正在使用IR的新blaze-integration分支,并对现有应用程序进行了必要的更改。我在我的一个模板中有一个yield区域:

<div>
        {{> yield region='signup-detail'}}
</div>

我想使用yieldTemplates在路线配置中设置此区域。我的路线配置如下:

this.route('signUpInfo', {
        path: '/sign-up',
        template: 'signUp-form',
        yieldTemplates: _.extend({}, mainYieldTemplates, {
            'information': {to: 'signup-detail'}
        })
    });

mainYieldTemplates = {
    'footer': { to: 'footer' },
    'header': {to: 'header'}
};

我的模板“信息”未呈现为signup-detail。只有新的鲨鱼分支和IR火焰发生,使用Yield模板有什么变化?

页脚和页眉模板设置正确。

编辑:模板布局

<template name="basicLayout">

    {{> yield region='header'}}
    <div class="container">
        <div class="row">
            <div class="col-md-12 col-centered padding-top-four-em">
                {{> yield}}
            </div>
        </div>
        <hr>
        <footer>
            {{> yield region='footer'}}
        </footer>
    </div>
</template>

编辑2:SignUp表单模板

<template name="signUp-form">
    <div class="col-md-12 signup-container">
        {{>signUpSideBar}}
        <div class="col-md-9 signup-content gray-border-box">
            {{> yield region='signup-detail'}}
        </div>
    </div>
</template>

注意:signUp表单模板的区域为signup-detail。这是我的路线signUpInfo需要将information模板呈现到该区域的位置。这曾经在火焰整合之前在IR工作。

2 个答案:

答案 0 :(得分:9)

  

我不知道它是一种完美的渲染方式。但它对我有用

route.js

Router.route('/', function () {

    // use the template named ApplicationLayout for our layout
    this.layout('ApplicationLayout');

    // render the Post template into the "main" region
    // {{> yield}}
    this.render('Post');

    // render the PostAside template into the yield region named "aside" 
    // {{> yield "aside"}}
    this.render('PostAside', {to: 'aside'});

    // render the PostFooter template into the yield region named  "footer" 
   // {{> yield "footer"}}
   this.render('PostFooter', {to: 'footer'});
});

ApplicationLayout.html

<template name="ApplicationLayout">
    <header>
        <h1>{{title}}</h1>
    </header>

    <aside>
        {{> yield "aside"}}
    </aside>

    <article>
        {{> yield}}
    </article>

    <footer>
        {{> yield "footer"}}
    </footer>
</template>

main.html中

<template name="Post">
    <p>
        {{post_content}}
    </p>
</template>

<template name="PostFooter">
    Some post specific footer content.
</template>

<template name="PostAside">
    Some post specific aside content.
</template>

答案 1 :(得分:0)

您的{{> yield region='signup-detail'}}看起来不在您的yieldTemplate中,因此路由器无法找到注册详细信息区域以插入您的信息&#39;模板。

您的yieldTemplate中的

{{> yield}}正在呈现&#39; signUp-form&#39; (来自您路线中的template:作业。

如果您的注册详情为&#39;模板是&#39; signUp-form&#39;中的模板,只需使用{{> signup-detail}}

如果您想要&#39;注册 - 详细信息&#39;作为layoutTemplate的一部分在多个模板中重复使用,然后将{{> yield region='signup-detail'}}添加到yieldTemplate。