Вложенные динамические шаблоны Meteor Flow Router

Я пытаюсь визуализировать динамический шаблон внутри динамического шаблона.

Основной план:

<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>

Sub-sub-Template:

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

Ниже мой код FlowRouter. Это неправильно, но я подумал, что это может дать кому-то представление о том, что я пытаюсь сделать. FlowRouter:

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

Я пытаюсь отобразить шаблон 2 внутри шаблона 1, а затем после этого я хотел бы отобразить шаблон 3 внутри шаблона 2. Должен ли я каким-то образом визуализировать шаблон 3 внутри шаблона 2, прежде чем я смогу отобразить этот шаблон внутри шаблона 1?


javascript meteor rendering meteor-blaze flow-router
person John McNeill    schedule 09.03.2016    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Вы захотите визуализировать подшаблон с помощью помощника. Измените код вашего маршрутизатора на:

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

Вам нужен только один вызов рендеринга, потому что template2 автоматически рендерит данный динамический шаблон. Теперь в template2 создайте помощника:

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

Вы можете заменить оператор return другой логикой, если хотите, если он возвращает имя шаблона.

person Stephen Woods    schedule 09.03.2016

arrow_upward
2
arrow_downward

Вы также можете сделать это без помощника по шаблону:

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' });
    }
});

А затем в части JS шаблона деталей вы можете получить идентификатор:

Template.todo.onCreated(function todoOnCreated() {
   var id = FlowRouter.getParam('id');
   // ...
});
person Zeus    schedule 16.10.2016
comment
Красивое и простое решение. - person Abk; 20.04.2017