Meteor Flow Router 嵌套动态模板答案

【问题标题】：Meteor Flow Router nested dynamic templatesMeteor Flow Router 嵌套动态模板
【发布时间】：2016-06-24 09:16:18
【问题描述】：

我正在尝试在动态模板中呈现动态模板。

主布局：

<template name="template1">
    {{>navbar}}
    <div class="container">
        {{>Template.dynamic template=content}}
    </div>
</template>

子模板：

<template name="template2">
<div class="container">
    <div class="row">
        <h2>Data Input</h2>
    </div>
    <div class="row">
        <ul class="nav nav-pills">
            <li class="active"><a href="/input/inc">Inc</a></li>
            <li><a href="/input/exp">Exp</a></li>
        </ul>
    </div>
    <div class="row">
        {{>Template.dynamic template=dataSection}}
    </div>
</div>

子子模板：

<template name="template3">
<h2>Inc</h2>
</template>

以下是我的 FlowRouter 代码。这是错误的，但我认为它可能会让某人知道我正在尝试做什么。流路由器：

FlowRouter.route('/input/income', {
action: function () {
    BlazeLayout.render("template1", {
        content: "template2"
    });
    BlazeLayout.render("template2", {
        dataSection: "template3"
    });
 }
});

我正在尝试在模板 1 内渲染模板 2，然后我想在模板 2 内渲染模板 3。我是否必须以某种方式在模板 2 内渲染模板 3，然后才能在模板 2 内渲染该模板模板1？

【问题讨论】：

标签： javascript meteor rendering meteor-blaze flow-router

【解决方案1】：

您需要使用帮助程序来呈现子模板。将您的路由器代码更改为：

action: function () {
    BlazeLayout.render("template1", {
        content: "template2"
    });
}

您只需要一次渲染调用，因为 template2 会自动渲染给定的动态模板。现在在 template2 中创建助手：

Template.template2.helpers({
  dataSection() {
    return "template3";
  }
});

如果你愿意，你可以用不同的逻辑替换 return 语句，只要它返回一个模板的名称。

【讨论】：

【解决方案2】：

您也可以在没有模板助手的情况下执行此操作：

BlazeLayout.render('App_Body', {main: 'parent', sub: 'details' });

主模板的 HTML

<template name="App_body">
   {{> Template.dynamic template=main}}
</template>

父模板的 HTML

<template name="parent">
    Parent template
    {{> Template.dynamic template=sub}}
</template>

子模板的 HTML

<template name="details">
    Sub template
</template>

与路线的深度链接变得更加容易：

FlowRouter.route('/todos/show/:id', {
    name: 'Todo.show',
    action(params, queryParams) {
        BlazeLayout.render('App_body', {main: 'parent', sub: 'details' });
    }
});

然后在details template JS部分就可以拿到id了：

Template.todo.onCreated(function todoOnCreated() {
   var id = FlowRouter.getParam('id');
   // ...
});

【讨论】：

不错的简单解决方案。