我读了很多关于此的帖子，包括good tutorial但我仍然找不到我的代码有什么问题。我的目的是配置我正在设计的网页，使其能够与 Iron Router 一起使用。
它基本上显示许多带有标题的图片，当用户选择一张图片时，会以新的模板和格式显示一条消息(这就是我需要 Iron Router 的原因)。
我在设置时遇到了麻烦:ApplicationLayout 模板应该为每个用户呈现 boost 模板，以便显示他/她的所有图片。然而，当它显示时，我得到了 body.html 的 html，但没有得到 boost.html 中的 html。
Java Script 帮助程序和事件处理程序工作正常；我已经检查过了。这就是为什么我只包含 body.html、boost.html 和 paths.js 的代码。请注意，该代码对应于三个不同的文件: 两个 html 文件都位于同一文件夹 (ui) 中，js 文件位于 lib 文件夹中，全部位于我的项目目录中。
提前致谢!
body.html
<template name="ApplicationLayout">
<body>
{{> sAlert}}
<div id="background">
<img src="http://s1.picswalls.com/wallpapers/2015/11/21/beautiful-motivation-wallpaper_10342177_288.jpg" class="stretch" alt="" />
</div>
<div class="container">
<header>
{{#if currentUser}}
<h1>Your Boosts! ({{incompleteCount}})</h1>
{{else}}
<h1>Community Boosts!</h1>
{{/if}}
{{> undoRedoButtons}}
{{> loginButtons}}
{{#if currentUser}}
<form class="new-boosts">
<input type="text" name="text" placeholder="Type to add a short description"/>
<input type="text" name="image" accept = "image/*" placeholder="Type to add a picture url"/>
<input type="number" name="importance" min = "0" placeholder="Type to choose an importance position"/>
<textarea class = "text-area" name="message" rows = "10" cols = "5" placeholder="Type a message for yourself"></textarea>
<input type="submit" value="Submit" class="new-boosts first">
</form>
{{/if}}
</header>
<ul>
{{#each boosts}}
{{> yield}}
{{/each}}
</ul>
</div>
</body>
</template>
boost.html
<template name="boost">
<article class="image-with-header">
<img class="image" src="{{image}}" />
</article>
<li class="{{#if private}}private{{/if}}">
<button class="delete">×</button>
{{#if isOwner}}
<button class="toggle-private">
{{#if private}}
Private
{{else}}
Public
{{/if}}
</button>
{{/if}}
<span class="text"><strong>{{username}}</strong> - <input type="text" value="{{text}}" name="caption"> - <input type="number" value="{{importance}}" name="importance"> </span>
</li>
</template>
routes.js
Router.configure({
layoutTemplate: 'ApplicationLayout'
});
Router.route('/', function () {
this.layout('ApplicationLayout');
this.render('boost');
});
最佳答案
我相信问题是您在 each 循环中使用 {{> Yield}} 。试试这个:
*.html
<template name="ApplicationLayout">
<body>
{{!-- ... --}}
<ul>
{{> yield}}
</ul>
{{!-- ... --}}
</body>
</template>
<template name="boosts">
{{#each boosts}}
{{> boost}}
{{/each}}
</template>
<template name="boost">
{{!-- ... --}}
</template>
*.js
// in tempalte file
Template.boosts.helpers({
boosts() {
// return boosts here
}
});
// in router file
Router.configure({
layoutTemplate: 'ApplicationLayout'
});
Router.route('/', function () {
this.render('boosts');
});
关于javascript - 如何使用 IronRouter 和 Meteor 将模板渲染为模板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41436137/