rails-在遍历数组时添加html div标签

Question

I'm trying to display a conversation in my html.erb file.

I'm using a specific template and want to copy their chat section.

Here's the chat section:

http://webapplayers.com/inspinia_admin-v2.7.1/chat_view.html

I noticed that their chat "bubbles" are just different divs.

Like this:

 <div class="chat-message left">
    <img class="message-avatar" src="<%= image_path('a1.jpg') %>" alt="">
    <div class="message">
        <a class="message-author" href="#"> Michael Smith </a>
        <span class="message-date"> Mon Jan 26 2015 - 18:39:23 </span>
            <span class="message-content">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </span>
    </div>
</div>

<div class="chat-message right">
    <img class="message-avatar" src="<%= image_path('a4.jpg') %>" alt="">
    <div class="message">
        <a class="message-author" href="#"> Karl Jordan </a>
        <span class="message-date">  Fri Jan 25 2015 - 11:12:36 </span>
            <span class="message-content">
                Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover.
            </span>
    </div>
</div>

If i have an array of @messages in my html.erb file, how can I traverse the array and for every message add one of those div sections in order to make my chat view?

Alternatively, I will have to put it in some sort of table with each row styled depending on whether the message is incoming or outbound.

Answer 1

You can do this by just iterating @messages with @messages.each do |message|...end and then within the block have your divs with the message contents. A cleaner way might be to set up a _chat_view.html.erb partial with these divs and then in your main html.erb file you can do render partial: 'chat_view', collection: @messages and you still get the message object in the partial that you can use.