Question

我需要在class（从模块中导出）中对const进行反应。

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

此class属于以innerHTML的{{1}}插入的HTML块。

createElement

下面的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}}打破所有

有什么想法吗？

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

<i id="idcont" class=" ' + {{starred}} + ' "></i>

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是明星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"。

使用帮助器设置css类

1 个答案: