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

Question

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

消息模板

<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'
});

我试图像下面这样定义我的 class，但是 Handlebars 抛出了一个错误：

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

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

提前致谢。

Answer 1

您需要 return 来自助手的转义字符串。

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>

聊天-message.js 组件：

import Ember from 'ember';

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

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

聊天-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>

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

How to bind a dynamic class to an element in Handlebars and Ember?

handlebars.js

ember.js

ember-data