轨道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观点感谢这个自定义属性更新到一组三个阿贾克斯链接和如下已经实现了这一功能：

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

我不明白的是我会如何，我认为更新这些类，当用户点击上面的链接之一。

-----

UPDATE：也许我可以用的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> 

的班后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. 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何时何地的成本效益。但是，这是你怎么做的。