使用助手设置 css class

Question

我需要在 const（从模块导出）中制作反应式 class。

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

此 class 属于 HTML 块，该块作为 createElement.

的 innerHTML 插入

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> 以纯文本形式给出 {{starred}}
<i id="idcont" class=" ' + {{starred}} + ' "></i> 打破一切

有什么想法吗？

更新 - 根据要求更新完整的 Blaze 模板

<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，但 meteor-blaze 想要使用空格键构建 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 aisStarredboolean 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"。

使用助手设置 css class

Use a helper to set a css class

meteor

meteor-blaze