Rails 4：在Ajax调用时更改链接样式

Question

在我的Rails 4中，我具有以下模型：

class Calendar < ActiveRecord::Base
  has_many :administrations
  has_many :users, through: :administrations
  has_many :posts
  has_many :comments, through: :posts
end

class Administration < ActiveRecord::Base
  belongs_to :user
  belongs_to :calendar
end

class Post < ActiveRecord::Base
  belongs_to :calendar
  has_many :comments
end

将显示post对象所属Calendars#Show视图。

帖子模型具有:approval自定义属性。

我要通过Calendars#Show视图更新此自定义属性，这要归功于一组三个Ajax链接，并且实现了以下功能：

<%= link_to post_path(:id => post.id, "post[approval]" => "ok"), :remote => true, :method => :patch do %>
              <span class="glyphicon glyphicon-ok"></span>
            <% end %><br/>
            <%= link_to post_path(:id => post.id, "post[approval]" => "edit"), :remote => true, :method => :patch do %>
              <span class="glyphicon glyphicon-repeat"></span>
            <% end %><br/>
            <%= link_to post_path(:id => post.id, "post[approval]" => "remove"), :remote => true, :method => :patch do %>
              <span class="glyphicon glyphicon-remove"></span>
            <% end %>

当前运行良好，正如我在Rails控制台中看到的那样:approval单击上面的链接之一时， :approval属性已更新。

现在，在更新:approval属性的同时，我想更新链接的样式。

例如，我希望单击的链接变为绿色/黄色/红色（分别对应于第一个，第二个和第三个链接），另一个变为灰色。

我知道我必须为每种样式定义一些CSS类，例如：

.ok-green {
    color: green;
}

.edit-yellow {
    color: yellow;
}

.remove-red {
    color: red;
}

.link-grey {
    color: grey;
}

我不明白的是，当用户单击上面的链接之一时，我将如何在视图中更新这些类。

——————

更新 ：也许我可以按照此处的建议使用Coffeescript来更新链接的类。 但是，Coffeescript代码应该放在哪里？

——————

更新2 ：在视图中使用一个简单的if else语句，我尝试了以下操作：

<% if post.approval == "ok" %>
          <span class="ok_green">
        <% else %>
          <span class="approval_grey" %>
        <% end %>
          <%= link_to post_path(:id => post.id, "post[approval]" => "ok"), :remote => true, :method => :patch do %>
            <span class="glyphicon glyphicon-ok"></span>
          <% end %>
        </span><br/>
        <% if post.approval == "edit" %>
          <span class="edit_yellow">
        <% else %>
          <span class="approval_grey" %>
        <% end %>
        <%= link_to post_path(:id => post.id, "post[approval]" => "edit"), :remote => true, :method => :patch do %>
          <span class="glyphicon glyphicon-repeat"></span>
        <% end %>
        </span><br/>
        <% if post.approval == "remove" %>
          <span class="remove_red">
        <% else %>
          <span class="approval_grey" %>
        <% end %>
        <%= link_to post_path(:id => post.id, "post[approval]" => "remove"), :remote => true, :method => :patch do %>
          <span class="glyphicon glyphicon-remove"></span>
        <% end %>
        </span>

这的确会更改链接的颜色...但是仅在刷新页面后，而不是在单击链接时“实时”地更改。

有什么想法可以实现一个相似的想法，但是可以使用Ajax实时实现吗？

——————

知道如何实现吗？

Answer 1

有很多可能的途径。 我给你一个简化的。

首先，因为你将要更新的模板的作品 ，你会希望他们提取到的谐音

views / calendars / show.html.erb

<% @calendar.posts each do |post| %>
  <% render partial: 'post_partial', object: post %>
<% end %>

您可以在此处阅读有关render partial语法的更多信息。

接下来，我将把您的部分包装在div中，该类是approval并且其id使用Rails提供的名为dom_id 帮助 dom_id ，它将创建类似id="post_123" 。

views / calendars / _post_partial.html.erb

<div class="post-#{ post.approval }" id="#{ dom_id(post) }>
  <!-- all of your links to post_path -->
</div>

post-ok等的类将允许您编写一些CSS，例如

.post-ok .glyphicon-ok {
  color: green;
}

.post-ok .glyphicon-edit {
  color: grey;
}

这样，当您的批准状态更改时，CSS会处理更改的颜色，并且HTML可以使用您想到的任何将来状态进行更新。

现在，你的回应remote: true链接，你将需要与回应.js.erb模板淘汰掉旧post_partial和交换在新的一个。

请注意， 您的链接专门指向update ，这就是为什么这是我的视图名称。 您可能要创建一个特定的路由（可能称为update_status ），因为您可能已经在以其他形式更新帖子了。

视图/帖子/update.js.erb

$('#<%= dom_id(@post) %>').replaceWith("<%= j render partial 'calendars/post_partial', object: @post %>");

该JavaScript特别使用jQuery（默认情况下应在您的Gemfile中）执行以下操作：

1. 根据其ID抓取页面上的项目 ，在本例中为更新的Post ...的ID。
2. ... 替换掉被抓取的整个DOM元素 ...
3. ...部分名为“ post_partial”，但格式为JavaScript安全

让我知道怎么回事。 用JS模板替换DOM可能会很麻烦，并且在某些时候您将需要确定何时何地使用AJAX的成本效益。 但是，这就是您要做的。