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 自定义属性。

感谢一组三个 Ajax 链接，我想从 Calendars#Show 视图更新此自定义属性，并已实现此功能，如下所示：

<%= 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 属性的同时，我想更新链接的样式。

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

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

.ok-green {
    color: green;
}

.edit-yellow {
    color: yellow;
}

.remove-red {
    color: red;
}

.link-grey {
    color: grey;
}

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

————

更新：也许我可以使用 Coffeescript as recommended here 来更新链接的类。但是，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

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

首先，由于您要更新模板的片段，因此您需要将它们提取到部分中

视图/日历/show.html.erb

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

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

接下来，我将把你的部分包装在一个 div 中，它的类是 approval，它的 id 使用 a Rails-provided helper，称为 dom_id，这将创建类似 id="post_123" 的东西。

视图/日历/_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），因为您可能已经在以另一种形式更新帖子。

views/posts/update.js.erb

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

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

1. Grab an item on the page based on its ID，在这种情况下是更新后的帖子的ID...
2. ...replace the entire DOM element 被抓住了...
3. ...部分称为“post_partial”，但formatted to be JavaScript safe

让我知道这是怎么回事。用 JS 模板替换 DOM 可能是一个兔子洞，在某些时候，您将需要确定何时何地使用 AJAX 的成本效益。但是，这就是你的做法。