javascript - 带有 Ruby on Rails 的 Ajax 简单 View 刷新

Question

我想知道是否有人可以帮助我解决我在 Rails 中处理 AJAX 的问题。我想尝试做一些简单的事情，我只是想不断检查索引 View 中是否有新条目会在屏幕外发生？

每隔几秒钟，新条目就会淡入，这真的很酷吗？新条目位于名为 image 的 div 类中，里面是这样的:

<%= image_tag image.image_url(:medium).to_s %>

我已经尝试了一些教程，但有些教程似乎已经过时，与我想要实现的目标相去甚远。我希望有人能在正确的方向上帮助我。

Answer 1

基本思想是:

1. 您存储以某种 javascript 可访问的方式加载的最新条目，例如在 data- 属性中
2. 延迟循环 ajax 调用
3. ajax 调用的响应将在您的 DOM 中产生变化

1

查看(图片/index.html.erb):

<% render @images %>

View (图片/_image.html.erb):

<div class="image" data-id="<%=image.id%>">
  <%= image_tag image.image_url(:medium).to_s %>
</div>

2

Javascript:

function poll(){
  latest_id = $('div.image:first').data('id')
  $.getScript('/images?latest_id='+latest_id)
}

$(function(){setInterval(poll, 5000})

3

Controller :

@images = Image.order('id desc')
@images = @images.where('id > ?', params[:latest_id]) if params[:latest_id]

查看(图片/index.js.erb):

$('div.image:first').before('<%=j render @images%>').hide().fadeIn()

请注意，我对您的模型名称和路径做了一些假设。您应该根据需要修改路径。

此示例仅用于说明目的，不适合实际应用程序 - 如果服务器过载，javascript 将不断向其发送请求，或者如果您的初始页面没有初始条目，插入新条目的方式将休息。