IronRouterとMeteorでテンプレートにテンプレートをレンダリングする方法

good tutorialを含む多くの投稿を読んでいますが、自分のコードに間違いがあります。私が意図しているのは、Iron Routerで作業できるように設計しているWebページを設定することです。IronRouterとMeteorでテンプレートにテンプレートをレンダリングする方法

基本的には、キャプション付きの写真が多数表示され、ユーザーが1つを選択すると新しいテンプレートとフォーマットでメッセージが表示されます（アイロンルータが必要な理由）。

私はセットアップ時に問題があります。ApplicationLayoutテンプレートは、すべてのユーザーの画像が表示されるように、各ユーザーのブーストテンプレートをレンダリングする必要があります。しかし、それが表示されると、body.htmlのhtmlは取得されますが、boost.htmlのhtmlは取得されません。

Java Scriptヘルパーとイベントハンドラは正常に動作します。私はそれをすでに確認しています。そのため、body.html、boost.html、およびroutes.jsのコードのみが含まれています。コードは3つの異なるファイルに対応しています：両方の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'); 
});

出典

2017-01-03 Lesscomfortable

私はこの問題は、あなたがしていることであると信じて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'); 
});

出典

2017-01-03 05:55:28 Khang

：これを試してみてください。それにもかかわらず、私は利回りが各ループでうまくいかない理由を理解することに興味があります。 @KhangはIron Routerがこのように動作する理由を知っていますか？それとも、それはただのことですか？ありがとう！ – Lesscomfortable

IronRouterとMeteorでテンプレートにテンプレートをレンダリングする方法

答えて

関連する問題