lundi 20 avril 2015

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

So I'm currently building a chat application and I need to bind a dynamic class to messages to define whether it is the senders message or the recipient. However, I'm not sure how to bind this class to an element with my current code:

Messages template

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

Highlight helper

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

I tried to define my class like the following, but Handlebars threw an error:

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

So my question is, how do I bind a dynamic class to an attribute while passing in parameters?

Thanks in advance.




Aucun commentaire:

Enregistrer un commentaire