如何使用 Ruby 動態創建 HTML 文件？

Question

問題說明

我有一個邏輯（我的視圖文件中的 if 語句），我將把它移到助手。 我發現有一種方法可以將 ruby 文件中的代碼轉換為普通的 HTML，如下所示：

fileHtml.puts "<h6> Upcoming event: </h6>"

這僅適用於 static 代碼。 如果我有一個數組並循環遍歷它怎么辦？

例子

module UsersHelper
def check_upcoming_event(event)
    <% if event.date > Time.now %>
        <div class="m-1">
            <div class="border border-secondary p-2 m-3">
                <h6> Upcoming event: </h6>
                <p><strong>Event Description:</strong> <%= event.description %></p>
                <p><strong>Event Start Date and Time:</strong> <%= event.date %></p>
            </div>
        </div>
    <% else %>
        <div class="m-1">
            <div class="border border-secondary p-2 m-3">
                <h6> Previously attended event: </h6>
                <p><strong>Event Description:</strong> <%= event.description %></p>
                <p><strong>Event Start Date and Time:</strong> <%= event.date %></p>
            </div>
        </div>
    <% end %>
end

結尾

現在，如何將數組的元素應用到 HTML 中，這是如何完成的？

fileHtml.puts "<p><strong>Event Description:</strong>" event.description fileHtml.puts "</p>"

我試圖以這種方式做到這一點，但它給出了一個錯誤

module UsersHelper
def check_upcoming_event(event)
    if event.date > Time.now
        fileHtml.puts "<p><strong>Event Description:</strong>" event.description fileHtml.puts "</p>"        
    end
end
end

Answer 1

我找到了一些東西，這不正是我想要的。

---

基本上，它只返回 nested:div 中的最后一個字符串

module UsersHelper
def check_upcoming_event(event)
    if event.date > Time.now
        content_tag :div, :class => "m-1" do
            content_tag :div, :class => "border border-secondary p-2 m-3" do
                tag.h6 "Upcoming event:"
                content_tag(:p, event.description)
                content_tag(:p, event.date)
            end
        end
    else
        content_tag :div, :class => "m-1" do
            content_tag :div, :class => "border border-secondary p-2 m-3" do
                content_tag(:h6, "Previously attended event:")
                content_tag(:p, event.description)
                content_tag(:p, event.date)
            end
        end
    end
end

有關使用 content_tag 在 Ruby 文件中創建 HTML 代碼的詳細指南，請訪問此鏈接。

更新

您可以按如下方式使用 concat，但請注意僅與帶括號的 content_tag 一起使用：

            concat(content_tag(:div, class: "col-md-2") do
                if opinion.author.photo.attached?
                    tag("img", src: url_for(opinion.author.photo), class: ["img-80", "rounded"])
                end
            end)
            concat(content_tag(:div, class: "col-md-10") do
                # another set of code block
            end)

Answer 2

您將 ruby 放入視圖以創建動態生成的 HTML。 您可以在其中放置循環、if 語句、任何 ruby 代碼。

將文件命名為<action>.html.erb ，其中<action>是 controller 操作的名稱（即index.html.erb ）。

在文件中，您可以使用 ruby 和<% %>並打印 ruby 和<%= %> 。

這是一個 if 語句：

<% if event.date > Time.now %>
  <div class="m-1">
    <div class="border border-secondary p-2 m-3">
      <h6> Upcoming event: </h6>
      <p><strong>Event Description:</strong> <%= event.description %></p>
      <p><strong>Event Start Date and Time:</strong> <%= event.date %></p>
    </div>
  </div>
<% else %>
  <div class="m-1">
    <div class="border border-secondary p-2 m-3">
      <h6> Previously attended event: </h6>
      <p><strong>Event Description:</strong> <%= event.description %></p>
      <p><strong>Event Start Date and Time:</strong> <%= event.date %></p>
    </div>
  </div>
<% end %>

這是一個循環：

<% events.each do |event| %>
  <% if event.date > Time.now %>
    ...
  <% else %>
    ...
  <% end %>
<% end %>

您通常應該為較小的代碼保留幫助程序。 例如，我通常包含一個名為amer_date的助手，它采用 ruby 日期 object 並將其轉換為格式為3/7/2020的字符串。 這是一行代碼date.strftime('%-m/%-d/%Y') ，但我使用它的次數太多了，因此值得使用幫助程序。