Question

我在这上面阅读了很多帖子，包括good tutorial，但我仍然无法找到我的代码有什么问题。我的目的是配置我正在设计的网页，以便能够使用Iron Router。

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

我在设置时遇到了麻烦：ApplicationLayout模板应为每个用户呈现提升模板，以便显示所有他/她的图片。但是，当它显示时，我得到body.html的html但不是boost.html中的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');
});

Answer 1

我认为问题在于您在{{> yield}}循环中使用each。试试这个：

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

如何使用IronRouter和Meteor将模板渲染到模板中

1 个答案: