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

时间:2016-05-09 12:24:55

标签: ruby-on-rails ruby views

我在文件视图名称中有代码:_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 %>

1 个答案:

答案 0 :(得分:0)

这只是一个代码重写练习,所以这里是:

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

这可以是最短的,不会崩溃结构或只是删除空格。每个剩余的元素似乎都有一个目的,并且放在它应该的位置,没有冗余或过度复杂。