ヘルパーを使用してCSSクラスを設定する

Question

classをconst（モジュールからエクスポート）の中に反応させる必要があります。

export const messageControls = ' 
    <div id="controls""> 
     <i id="idcont" class="{{starred}}"></i> 
    </div> 
' 

このclassはcreateElementのinnerHTMLとして挿入されますHTMLブロックに属します。以下

var newElement = document.createElement('div'); 
newElement.id = i._id; 
newElement.className = "single_message"; 
newElement.innerHTML = messageControls;    
document.getElementById('conversation_details').appendChild(newElement); 

{{helper}}は何もレンダリングされません。

starred: function() { 
    return 'bob'; 
}, 

• <i id="idcont" class="{{starred}}"></i>はプレーンテキストで
• <i id="idcont" class=" ' + {{starred}} + ' "></i>休憩すべて

任意のアイデアを{{starred}}を与えますか？

アップデート - 要求された

<template name="inbox"> 
    <div class="searchmessages"> 
     <input type="text" name="searchmessages" id="searchmessages" placeholder="&nbsp;&#xf002;&nbsp;&nbsp;any word/any date"> 
    </div> 
    <div class="row"> 

     <div class="col-xs-4 l-O list_messages"> 
      <div id="gridreceived" class="gridmessages"> 
       {{#each incoming_all}} 
        <div id="{{_id}}" class="item {{readornot}}"> 
         <div class="item-content"> 
          <div class="task_inlist"> 
           <div class="task_from"> 
            {{{from}}} 
           </div> 
           <div class="task_date"> 
            {{initialdate}} 
           </div> 
           <div class="task_subject"> 
            {{{subject}}} 
           </div> 
           <div class="task_content"> 
            {{{htmlbody}}} 
           </div> 
          </div> 
         </div> 
        </div> 
       {{/each}} 
      </div> 
      <div class="grid_nomatch">{{grid_noresult}}</div> 
     </div> 

     <div id="conversation_details" class="col-xs-8" media="print"> 
      <!-- 
      here are each selected message details 
      --> 
     </div> 
    </div> 
</template> 

Answer 1

としてフルブレイズテンプレートは、あなたはDOMに直接宇宙・天体バーテンプレートマークアップを注入しようとしているが、流星-炎は、DOMを構築するために宇宙・天体バーを使用することを望んでいます。それは、任意の変更のDOMを見て、それの中でテンプレート置換を行いません！

代わりに、Meteorの反応性を使用して、基礎となるデータの変更に基づいて新しいアイテムを自動的にDOMに挿入することができます。あなたのケースでは、クリックされたメッセージの詳細を表示しようとしているようです。おそらく、クリックを捕捉するテンプレートイベントハンドラがあります。このテンプレートハンドラでは、現在選択されているメッセージを示す変数Sessionを設定し、メッセージの詳細をレンダリングするヘルパー内でそのSession変数を使用することができます。例えば

：

<template name="inbox"> 
    <div class="searchmessages"> 
    <input type="text" name="searchmessages" id="searchmessages" placeholder="&nbsp;&#xf002;&nbsp;&nbsp;any word/any date"> 
    </div> 
    <div class="row"> 

    <div class="col-xs-4 l-O list_messages"> 
     <div id="gridreceived" class="gridmessages"> 
     {{#each incoming_all}} 
      <div id="{{_id}}" class="item {{readornot}}"> 
      // render summary of each message 
      </div> 
     {{/each}} 
     </div> 
    <div class="grid_nomatch">{{grid_noresult}}</div> 

    {{#with selectedMessage}} 
     <div id="conversation_details" class="col-xs-8" media="print"> 
     // render selected message details 
     </div> 
    {{/with}} 
    </div> 
</template> 

あなたのJS：今

Template.inbox.events({ 
    'click .item'(ev) { 
    Session.set('selectedMessageId',this._id); 
    } 
}); 

Template.inbox.helpers({ 
    selectedMessage() { 
    return Messages.findOne(Session.get('selectedMessageId')); 
    } 
}); 

どのように反応的スタイル要素には約あなたのフォローアップの質問へ。 message* object has aがAstred boolean key. In the message detail section we've set the data context using {{#with currentMessage}} `であるとしましょう。現在のメッセージのどのキーも、私たちのスペースバーテンプレートで直接使用できます。あなたは、メッセージを表示している場合は、あなたが行うことができます詳細：メッセージは、これはclass=""かclass="starred"としてレンダリングする主演しているかどうかに応じて、

<div id="controls""> 
    <i id="idcont" class="{{#if isStarred}}starred{{/if}}"></i> 
</div> 

。