Question

我需要知道在meteor js中单击按钮时动态更改主体模板。例如，我的应用程序中总共有3个模板。

一个模板是标题模板
第二个是侧边菜单模板
和另一个是内容模板

每当点击菜单项时，只使用路由器包更改为内容模板，而不是转到新页面。所以请建议我该怎么办？

先谢谢。

Answer 1

这可以使用路由器的布局和yeild功能。正如本教程http://www.manuel-schoebel.com/blog/iron-router-tutorial

中所定义的那样

在流星中，我们只渲染和渲染部分dom而不是整个事物。作为示例，我们希望有一个布局，指定菜单，页脚和渲染主要内容的区域。

这给出了这种html

<template name="complexLayout">
 <div class="left">
    {{> yield region="menu"}}
  </div>


  <div class="main">
    {{> yield}}
  </div>
  <div class="bottom">
    {{> yield region="footer"}}
  </div>
</template>

在此模板中，Iron-Router提供了三个区域。一个＆＃39; Main-Yield＆＃39;和两个名为 - 收益率＆＃39;或者＆＃39;地区＆＃39;用名字＆＃39;菜单＆＃39;和＆＃39;页脚＆＃39;。如果我们想要指定要在哪里呈现的模板，那么这些名称很重要。我们现在希望Iron-Router使用我们的布局并呈现模板＆＃39; myMenu＆＃39;名称＆＃39;菜单＆＃39;和模板＆＃39; myFooter＆＃39;名为＆＃39; footer＆＃39;。

this.route('home', {
  path: '/',
  layoutTemplate: 'complexLayout',
  yieldTemplates: {
    'myMenu': {to: 'menu'},
    'myFooter': {to: 'footer'}
  }
});

使用此选项，所有路径（或目标路径）可能具有相同的布局，并且仅根据当前页面更改某些部分。不要忘记可以使用Router.configure函数来设置默认值。

Router.configure({
  layoutTemplate: 'complexLayout',
  notFoundTemplate: 'notFound',
  loadingTemplate: 'loading'
});

这样做将允许开发人员定义在应用程序的不同状态下使用的默认布局。

如何在Meteor JS中使用路由器动态更改主体模板？

1 个答案: