javascript - rails 4 : changing link style upon Ajax call

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 View 中。

post 模型有一个 :approval 自定义属性。

由于一组三个 Ajax 链接，我想从 Calendars#Show View 更新此自定义属性，并按如下方式实现此功能:

<%= 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;
}

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

——————

更新:也许我可以使用 Coffeescript，as recommended here , 更新链接的类别。不过，Coffeescript 代码应该放在哪里？

——————

更新 2:在 View 中使用简单的 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 语法的信息 here .

接下来，我将把您的部分包装在一个 div 中，它的类是 approval 并且它的 id 使用 a Rails-provided helper称为 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 like

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

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

这样，当您的审批状态发生变化时，CSS 会处理颜色变化，并且您的 HTML 可以根据您 future 想到的任何状态进行更新。

现在，要响应您的 remote: true 链接，您需要使用 .js.erb 模板进行响应以替换旧的 post_partial 并换入新的。

请注意，您的 链接专门指向 update，这就是我的 View 名称的原因。您可能想要创建一个特定的路由(可以将其称为 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 ，在这种情况下，更新后的 Post 的 ID...
2. ... replace the entire DOM element被捕获了...
3. ...带有名为“post_partial”的部分，但是 formatted to be JavaScript safe

让我知道进展如何。用 JS 模板替换 DOM 可能是个难题，有时您需要确定何时何地使用 AJAX 的成本效益。但是，这就是您的做法。