【问题标题】:Yield Templates with meteor and iron router使用流星和铁路由器生成模板
【发布时间】:2014-04-30 09:46:37
【问题描述】:

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

<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 blaze 才会发生,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:注册表单模板

<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-detail。这是我的路线signUpInfo 需要将information 模板渲染到该区域的地方。这曾经在 blaze-integration 之前在 IR 中工作。

【问题讨论】:

  • 你搞定了吗?我在产量区域方面遇到了麻烦,但复制了你所做的,它对我有用。
  • @bgmaster,我仍然没有这个工作。我现在使用action 来渲染我的区域,而不是yieldTemplates 选项。我正在尝试隔离问题并查看问题出在哪里
  • 你能发布你的整个 layoutTemplate 吗?
  • @bgmaster 我添加了用于 95% 路线的布局模板。
  • 似乎对我有用

标签: javascript meteor iron-router


【解决方案1】:

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

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>

【讨论】:

    【解决方案2】:

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

    您的 yieldTemplate 中的{{&gt; yield}} 正在呈现“signUp-form”(来自您的路线中的 template: 分配。

    如果您的“signup-detail”模板是“signUp-form”中的模板,只需使用{{&gt; signup-detail}}

    如果您希望“注册详细信息”作为 layoutTemplate 的一部分在多个模板中重复使用,请将 {{&gt; yield region='signup-detail'}} 添加到您的 yieldTemplate。

    【讨论】:

    • 我不认为我理解您的解决方案。我更新了我的问题,向您展示模板 signUp-form 的样子
    • 删除该行:{{> yield region='signup-detail'}},而只使用 {{> signup-detail}}。那应该可以解决问题。产量区域仅适用于 layoutTemplates...signUp-form 是常规模板,而不是 layoutTemplate。
    • 如果我只使用{{&gt; signup-detail}},那么我的div.signup-content 中只能有一个名为signup-detail 的模板。我想要做的是在该 div 中为不同的路线呈现不同的模板。那有意义吗 ?我正在尝试将signUp-form 视为布局模板。
    • 我明白了,所以您基本上想要嵌套布局模板,对吗?我不知道这是可能的,但我也没有尝试过。您是否尝试通过 github 联系关注事件的人?对于临时解决方案,您可以只拥有多个布局模板。复制“basicLayout”,将“signUp-form”添加到其中,并将其重命名为“basicSignUpLayout”。然后,在您的路线中,只需添加“layoutTemplate:'basicSignUp-form'”行。这不是最优雅的解决方案,但它会让你到达你想去的地方。
    • 是的,我正在寻找嵌套的布局模板,我相信它可以在某一时刻起作用。我在那个 github 解决方案上提出了一个问题,但它没有任何吸引力。就像我说的,我正在使用action 函数来渲染模板
    猜你喜欢
    • 2014-10-30
    • 1970-01-01
    • 2016-05-04
    • 2023-03-09
    • 2014-09-03
    • 1970-01-01
    • 1970-01-01
    • 2015-08-11
    • 1970-01-01
    相关资源
    最近更新 更多