Question

我是初学者，试图用流星来解决问题。

我有一个用meteor编写的程序，它不能完全渲染模板。

main.html文件包含模板定义，如下所示。

<head>
  <title>simple</title>
</head>


<template name='ApplicationLayout'>
  <header>
    <h1>{{title}}</h1>
  </header>

  <aside>
    {{> yield "postAside"}}
  </aside>

  <article>
    {{> yield "main"}}  
  </article>

  <hr />

  <footer>
    {{> yield "postFooter"}}
  </footer>
</template>

<template name='post'>
  <p>Hello!!! This is Main Post Template.</p>
</template>

<template name='postAside'>
  <p>Side Menu</p>
</template>

<template name='postFooter'>
  <p>This is the footer.</p>
</template>

路线文件包含以下代码。

Router.route('/', function() {
	this.layout('ApplicationLayout');

	this.render('post', {to: 'main'});

	this.render('postAside', {to: 'aside'});

	this.render('postFooter', {to: 'footer'});
});

这是在浏览器中呈现的内容。您在浏览器中看到的是，只呈现了帖子模板，而不是页脚和页脚模板。

View the Actual Result Page

View Expected Result Page

当我使用{{#contentFor}}指令时，结果如预期的那样，但在上面的代码中，结果如实际结果所示。

任何人都可以帮我找到出错的地方吗？

感谢您的帮助。

Answer 1

声明路线如下：

Router.map(function () {
this.route('home', {
    path: '/',
    template: 'post',
    layoutTemplate: 'ApplicationLayout',
    yieldTemplates: {
        'postAside': {to: 'aside'},
        'postFooter': {to: 'footer'}
    }
});

将html更改为以下

<head>
  <title>simple</title>
</head>


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

  <aside>
    {{> yield region='aside'}}
   </aside>

  <article>
    {{> yield "main"}}  
  </article>

  <hr />

  <footer>
    {{> yield region='footer'}}
  </footer>
</template>

<template name='post'>
  <p>Hello!!! This is Main Post Template.</p>
</template>

<template name='postAside'>
  <p>Side Menu</p>
</template>

<template name='postFooter'>
  <p>This is the footer.</p>
</template>

Answer 2

感谢。这非常有效。但。我刚刚在原始代码中发现了问题。

问题出在html文件中我给了区域错误的名称。

代码段应该是这样的。

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

<article>
  {{> yield "main"}}  
</article>

<hr />

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

简单的流星模板和路由不起作用

2 个答案: