改进视图文件中的 JavaScript 代码

Question

我正在使用 Ruby on Rails 3.0.7，我想知道如何重构、DRY（不要重复自己）和改进 我的视图文件中的以下代码：

<% articles.each do |article| %>

  <div>
    <%= link_to 'add', '#', :id => "create_#{article.id}" %>
  </div>

  <script type="text/javascript">
    # Code - Block 1
    $jQ('#create_<%= article.id %>').live('click', function(event) {
      $jQ.ajax({
        type:    "POST",
        url:     "<%= article_url(@article) %>/create",
        data:    "article_id=<%= @article.id %>",
        error:   function(jqXHR, textStatus, errorThrown) {
          alert(textStatus + ' - ' + errorThrown + '\n\n' + jqXHR.responseText);
        },
        success: function(data, textStatus, jqXHR) {
          $jQ('#create_<%= article.id %>').replaceWith('<%= escape_javascript("added") + (link_to 'remove', '#', :id => "destroy_#{article.id}") %>')
        }
      });
    });

    # Code - Block 2
    $jQ('#destroy_<%= .id %>').live('click', function(event) {
      $jQ.ajax({
        type:    "POST",
        url:     "<%= article_url(@article) %>/destroy",
        data:    "article_id=<%= @article.id %>,
        error:   function(jqXHR, textStatus, errorThrown) {
          alert(textStatus + ' - ' + errorThrown + '\n\n' + jqXHR.responseText);
        },
        success: function(data, textStatus, jqXHR) {
          $jQ('#destroy_<%= article.id %>').replaceWith('<%= escape_javascript("removed") + (link_to 'add', '#', :id => "create_#{article.id}") %>')
        }
      });
    });
  </script>

<% end %>

注意：

• each 声明！
• 上面的“两个代码块”几乎相等。

Answer 1

• 将主体放在一个字符串中
• 有一个数组用于两次迭代（一个使用['create','added','remove',destroy']，另一个使用['destroy','removed','add','create']）
• 循环两次 (0..1)，为找到文本的槽插入数组值
  • 第一关：array[0][0], array[0][0], array[0][0], array[0][1], array[0][2], array[0][3]
  • 第二遍：array[1][0], array[1][0], array[1][0], array[1][1], array[1][2], array[1][3]

---

注意：我的 Ruby 生锈了，所以这里是伪代码。
示例（查找ary[i][n]）：

ary = [['create','added','remove',destroy'],
       ['destroy','removed','add','create']]

for i in (0..1)
   $jQ('#**ary[i][0]_<%= article.id %>').live('click', function(event) {
      $jQ.ajax({
         type:    "POST",
         url:     "<%= article_url(@article) %>/ary[i][0]",
         data:    "article_id=<%= @article.id %>",
         error:   function(jqXHR, textStatus, errorThrown) {
                     alert(textStatus + ' - ' + errorThrown + '\n\n' + jqXHR.responseText);
                  },
         success: function(data, textStatus, jqXHR) {
                     $jQ('#ary[i][0]_<%= article.id %>')
                        .replaceWith('<%= escape_javascript("ary[i][1]") + (link_to 'ary[i][2]', '#', :id => "ary[i][3]_#{article.id}") %>')
                  }
      });
   });
end

Answer 2

您可以做的是在您的文章循环中嵌套另一个方法数组，并使用它来相应地调整每个方法的内部代码块。

这是一个例子：（未经测试，但应该很接近）

<% articles.each do |article| %>

  <div>
    <%= link_to 'add', '#', :id => "create_#{article.id}" %>
  </div>

  <script type="text/javascript">
    <% [:create,:destroy].each do |method| %>
          $jQ('#<%="#{method}_#{article.id}" %>').live('click', function(event) {
            $jQ.ajax({.   
              type:    "POST",
              url:     "<%= "#{article_url(@article)}/#{method}" %>",
              data:    "article_id=<%= @article.id %>",
              error:   function(jqXHR, textStatus, errorThrown) {
                alert(textStatus + ' - ' + errorThrown + '\n\n' + jqXHR.responseText);
              },
              success: function(data, textStatus, jqXHR) {
                $jQ('#<%="#{method}_#{article.id}" %>').replaceWith('<%= escape_javascript({'create'=>'added','destroy'=>'removed'}[method]) + (link_to( {'create'=>'add','destroy'=>'remove'}[method], '#', :id => "#{method}_#{article.id}")) %>')
              }
            });
          });

    <% end %>
  </script>
<% end %>

您的其他选择是将其转换为一个辅助方法，该方法接受一篇文章和一个方法并生成正确的输出，或者您可以将必要的数据放在 html 标记中并让 javascript 转换它。