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

时间:2017-07-07 19:54:25

标签: javascript ruby-on-rails

我正在尝试在html.erb文件中显示对话。

我正在使用特定模板并想要复制他们的聊天部分。

以下是聊天部分:

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

我注意到他们的聊天“气泡”只是不同的div。

像这样:

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

如果我的html.erb文件中有@messages数组,我该如何遍历数组,并为每条消息添加其中一个div部分以进行聊天视图?

或者,我必须将它放在某种表格中,每一行的样式取决于邮件是传入还是出站。

1 个答案:

答案 0 :(得分:0)

您可以通过使用datePicker.setEditable(false); datePicker.setOnMouseClicked(e -> { if(!datePicker.isEditable()) datePicker.hide(); }); 迭代@messages来执行此操作,然后在块中使用带有消息内容的div。更简洁的方法可能是使用这些div设置@messages.each do |message|...end部分,然后在主html.erb文件中,您可以执行_chat_view.html.erb并且仍然可以获得部分中的render partial: 'chat_view', collection: @messages对象你可以使用。