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>

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

1 个答案: