如何使用 IronRouter 和 Meteor 将模板渲染为模板答案

【问题标题】：How to render templates into templates with IronRouter and Meteor如何使用 IronRouter 和 Meteor 将模板渲染为模板
【发布时间】：2017-05-17 02:38:27
【问题描述】：

我阅读了很多关于此的帖子，包括 good tutorial，但我仍然找不到我的代码有什么问题。我的目的是配置我正在设计的网页，使其能够与 Iron Router 一起使用。

它基本上显示了许多带有标题的图片，当用户选择一个时，会以新的模板和格式显示一条消息（这就是我需要 Iron Router 的原因）。

我在设置时遇到了麻烦：ApplicationLayout 模板应该为每个用户呈现 boost 模板，以便显示他/她的所有图片。但是，当它显示时，我得到了 body.html 的 html，而不是 boost.html 中的那个。

Java Script 帮助程序和事件处理程序工作正常；我已经检查过了。这就是为什么我只包含 body.html、boost.html 和 routes.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">&times;</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');
});

【问题讨论】：

标签： javascript html meteor iron-router

【解决方案1】：

我认为问题在于您在 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');
});

【讨论】：

这回答了我的问题，程序现在可以运行了。不过，我有兴趣了解为什么产量在每个循环中都不起作用。 @Khang 你会知道为什么 Iron Router 会这样工作吗？还是只是随意的？谢谢！