使用幫手來設置一個css類

Question

我需要在const（從模塊中導出）中生成響應模塊class。

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

這class屬於誰的插入爲createElement的innerHTML的HTML塊。以純文本

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

• <i id="idcont" class="{{starred}}"></i>給{{starred}}
• <i id="idcont" class=" ' + {{starred}} + ' "></i>打破了所有

任何想法：

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

下{{helper}}沒有呈現什麼？

更新 - 布拉全模板的要求

<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

你試圖直接注入spacebars模板標記到DOM，但流星閃耀想要使用spacebars構建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已加註星標boolean key. In the message detail section we've set the data context using {{#with currentMessage}}`，所以當前消息的任何密鑰都可以直接在我們的空格鍵模板中使用。你在哪裏顯示消息的詳細信息，你可以這樣做：

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

取決於是否被出演這個將呈現爲class=""或class="starred"消息。