如何改进 Rails 上 Ruby 上的视图中的代码

Question

我在文件视图名称中有代码：_result.html.erb，此文件是从文件 show.html.erb 呈现的，两个文件都在一个文件夹中

File _result.html.erb    
<% if @lesson.answers.at(f.index).is_correct %>
      <% if @lesson.answers.at(f.index).id == answer.id %>
        <li class="text-success">
          <%= f.radio_button :answer_id, answer.id, disabled: true %>
          <%= answer.content %>
        </li>
      <% else %>
        <li>
          <%= f.radio_button :answer_id, answer.id, disabled: true %>
          <%= answer.content %>
        </li>
      <% end %>
    <% else %>
      <% if @lesson.answers.at(f.index).id == answer.id %>
        <li class="text-danger">
          <%= f.radio_button :answer_id, answer.id, disabled: true %>
          <%= answer.content %>
        </li>
      <% else %>
        <li>
          <%= f.radio_button :answer_id, answer.id, disabled: true %>
          <%= answer.content %>
        </li>
      <% end %>
    <% end %>

我想改进文件 _result.html.erb 中的这段代码以使其更短，请帮助我！！！

File show.html
<% provide :title, t("start_lesson") %>
<h1><%= @course.name %></h1>
<h2><%= @course.description %></h2>
<h3><%= t "title_question" %></h3>

<% if @lesson.finished.present? %>
  <h4>
    <%= t "score" %>:
    <%= @lesson.results.is_correct_answers.count %> /
    <%= @lesson.words.count %>
  </h4>
<% end %>

<%= form_for [@course, @lesson] do |f| %>
  <%= f.fields_for :results do |builder| %>
    <ul class="list-unstyled">
      <li>
        <%= "#{builder.index + 1}." %>
        <%= @words.at(builder.index).content %>
      </li>
      <ul class="list-unstyled">
        <% @words.at(builder.index).answers.each do |answer| %>
          <% if @lesson.finished.nil? %>
            <li>
              <%= answer.content %>
              <%= builder.radio_button :answer_id, answer.id %>
              <%= builder.hidden_field :word_id, value: answer.word.id %>
            </li>
          <% else %>
              <%= render "result", f: builder, answer: answer %>
          <% end %>
        <% end %>
      </ul>
    </ul>
  <% end %>
  <% if @lesson.finished.nil? %>
    <%= f.submit t("submit"), class: "btn btn-primary" %>
  <% end %>
<% end %>

Answer 1

这只是一个代码重写练习，所以这里是：

result.html.erb

<% if @lesson.answers.at(f.index).id == answer.id %>
  <% if @lesson.answers.at(f.index).is_correct %>
    <li class="text-success">
  <% else %>
    <li class="text-danger">
  <% end %>
<% else %>
    <li>
<% end %>
      <%= f.radio_button :answer_id, answer.id, disabled: true %>
      <%= answer.content %>
    </li>

或更短（但更难阅读）的版本：

<li<% if @lesson.answers.at(f.index).id == answer.id %>class="<%= @lesson.answers.at(f.index).is_correct ? "text-success" : "text-danger" %>" <% end%>>
  <%= f.radio_button :answer_id, answer.id, disabled: true %>
  <%= answer.content %>
</li>

在第一个示例中，条件被反转以利用两个内部条件中的 else 条件相同的事实，然后仅使用这些条件来设置 <li> 节点的样式，因为这是 4 个块之间的唯一区别。

第二个示例更进一步，对元素进行条件检查，必要时构建 class 属性。这很难一目了然，但更紧凑。

show.html

<% provide :title, t("start_lesson") %>
<h1><%= @course.name %></h1>
<h2><%= @course.description %></h2>
<h3><%= t "title_question" %></h3>

<% if @lesson.finished.present? %>
  <h4><%= "#{t 'score'}: #{@lesson.results.is_correct_answers.count} / #{@lesson.words.count} %></h4>
<% end %>

<%= form_for [@course, @lesson] do |f| %>
  <%= f.fields_for :results do |builder| %>
    <ul class="list-unstyled">
      <li><%= "#{builder.index + 1}.#{@words.at(builder.index).content}" %></li>
      <ul class="list-unstyled">
        <% @words.at(builder.index).answers.each do |answer| %>
          <% if @lesson.finished.nil? %>
            <li>
              <%= answer.content %>
              <%= builder.radio_button :answer_id, answer.id %>
              <%= builder.hidden_field :word_id, value: answer.word.id %>
            </li>
          <% else %>
              <%= render "result", f: builder, answer: answer %>
          <% end %>
        <% end %>
      </ul>
    </ul>
  <% end %>
  <% if @lesson.finished.nil? %>
    <%= f.submit t("submit"), class: "btn btn-primary" %>
  <% end %>
<% end %>

此处的大部分更改只是使用字符串插值来组合多个 <%= %> 块的字符串元素。

构建答案列表的较大循环部分可能存在一些问题。例如，呈现的结果（课程未完成时）缺少 <li> 和 </li> 元素，因此答案只是作为一团文本放在封闭的 <ul> 中。为了保留这一点，以防万一是故意的，大部分中间块都保留了下来。

但是，这可能不是您真正想要的，因此此版本修复了该问题并进行了更多重组：

<% provide :title, t("start_lesson") %>
<h1><%= @course.name %></h1>
<h2><%= @course.description %></h2>
<h3><%= t "title_question" %></h3>

<% if @lesson.finished.present? %>
  <h4><%= "#{t 'score'}: #{@lesson.results.is_correct_answers.count} / #{@lesson.words.count} %></h4>
<% end %>

<%= form_for [@course, @lesson] do |f| %>
  <%= f.fields_for :results do |builder| %>
    <ul class="list-unstyled">
      <li><%= "#{builder.index + 1}.#{@words.at(builder.index).content}" %></li>
      <ul class="list-unstyled">
        <% @words.at(builder.index).answers.each do |answer| %>
          <li>
            <% if @lesson.finished.nil? %>
              <%= answer.content %>
              <%= builder.radio_button :answer_id, answer.id %>
              <%= builder.hidden_field :word_id, value: answer.word.id %>
            <% else %>
              <%= render "result", f: builder, answer: answer %>
            <% end %>
          </li>
        <% end %>
      </ul>
    </ul>
  <% end %>
  <% if @lesson.finished.nil? %>
    <%= f.submit t("submit"), class: "btn btn-primary" %>
  <% end %>
<% end %>

这是在不折叠结构或只删除空格的情况下最短的时间。每个剩余的元素似乎都有一个目的，并且被放置在它应该在的地方，没有冗余或过于复杂。

如何改进 Rails 上 Ruby 上的视图中的代码

How to improve code in Views on Ruby on Rails

ruby

views

ruby-on-rails