如何将动态类绑定到 Handlebars 和 Ember 中的元素？

Question

所以我目前正在构建一个聊天应用程序，我需要将一个动态类绑定到消息以定义它是发件人消息还是收件人。但是，我不确定如何使用当前代码将此类绑定到元素：

消息模板

<ul class="content conversation" id="conversation">
    {{#each message in messages}}
        <li>
            {{messageHighlight currentUser.id message.sender_id}}
            <div class="avatar">
                <img {{bind-attr   src="message.thumb"}} />
            </div>
            <div class="chat-message">
                <p>{{message.text}}</p>
                    <time>
                    {{message.sender.username}} • {{message.created_at}}
                    </time>
                </div>  
        </li>
    {{/each}}
</ul>

高亮助手

Ember.Handlebars.helper('messageHighlight', function(currentUserId, senderId)
{
    return (senderId == currentUserId) ? 'self' : 'other'
});

我尝试如下定义我的类，但 Handlebars 抛出错误：

<li class="{{messageHighlight currentUser.id message.sender_id}}">

所以我的问题是，如何在传递参数时将动态类绑定到属性？

提前致谢。

Answer 1

您需要从帮助程序返回一个转义字符串。

Ember.Handlebars.helper('messageHighlight', function(currentUserId, senderId) {
  var klass =  (senderId == currentUserId) ? 'self' : 'other';
  return new Ember.Handlebars.SafeString(klass);
});

在模板中

<li class="{{messageHighlight currentUser.id message.sender_id}}" >The message</li>

这是一个有效的jsbin

仅供参考，您需要使用 Ember 1.11.0 或使用绑定属性而不使用 {{bind-attr}}

使用 Ember 1.10 或更低版本，您可以像这样为li 的内容使用组件。

<ul class="content conversation" id="conversation">
    {{#each message in messages}}
        {{chat-message message=message currentUser=currentUser}}
    {{/each}}
</ul>

chat-message.js 组件：

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'li',
  classNameBindings: [messageHighlight],

  messageHighlight(){
    return (message.sender.id == currentUser.Id) ? 'self' : 'other'
  }
});

chat-message.hbs 模板：

  <div class="avatar">
    <img {{bind-attr src="message.thumb"}} />
  </div>
  <div class="chat-message">
    <p>{{message.text}}</p>
    <time>
      {{message.sender.username}} • {{message.created_at}}
    </time>
 </div>