我的问题涉及导航链接/无限滚动。
我为每个微型帖子包括了一个"删除"按钮。当单击该按钮时,会向服务器发出ajax调用,删除微型帖子并从DOM中移除该div。
假设第一页有1到10号微型帖子,第二页有11到20号微型帖子等等。 假设我删除第一页的项目1、2和3。 然后向下滚动。 服务器将"重新计算"微型帖子;因为我删除了前一个列表中的3个,所以它将返回13到22号物品。换句话说,微型帖子10、11和12不显示在第一页或第二页。
在stackoverflow上寻找解决方案后,我找到了一个解决方法:
每当我从列表中删除微型帖子时,我加载紧随页面上最后一个微型帖子的微型帖子,并将其插入底部。
我使用will_paginate gem在默认情况下在一页上显示10条微型帖子。我需要知道任何给定时间显示的任何微型帖子的ID。我通过将其存储在包含每个微型帖子的容器的开放div标记中来实现这一点:
现在我知道每个微博的ID,所以当一个微博被删除时,我使用jquery选择器找到页面上最后一个.postHolder div,获取该ID,然后使用该ID获取其后面的微博,并将该微博插入其中。这样,当一条消息被删除时,另一条消息会自动添加。
如果用户滚动加载更多消息,则不会丢失任何消息。我看过一些railscasts,看到Ryan Bates使用数据属性做类似的事情,并阅读了一些关于它们的文章,似乎给人留下了不好的印象。
我尝试想出其他方法来完成这个任务,但是想不到除了这种方式之外的更好的方法。也许这只是我的想法,但如果可能的话,我希望有另一个更好的解决方案。
谢谢
顺祝商祺
我为每个微型帖子包括了一个"删除"按钮。当单击该按钮时,会向服务器发出ajax调用,删除微型帖子并从DOM中移除该div。
假设第一页有1到10号微型帖子,第二页有11到20号微型帖子等等。 假设我删除第一页的项目1、2和3。 然后向下滚动。 服务器将"重新计算"微型帖子;因为我删除了前一个列表中的3个,所以它将返回13到22号物品。换句话说,微型帖子10、11和12不显示在第一页或第二页。
在stackoverflow上寻找解决方案后,我找到了一个解决方法:
每当我从列表中删除微型帖子时,我加载紧随页面上最后一个微型帖子的微型帖子,并将其插入底部。
我使用will_paginate gem在默认情况下在一页上显示10条微型帖子。我需要知道任何给定时间显示的任何微型帖子的ID。我通过将其存储在包含每个微型帖子的容器的开放div标记中来实现这一点:
<% @microposts.each do |m| %>
<div class="postHolder" data-micropost-id="<%= m.id %>">
在我的microposts.js资源文件中,我可以这样访问它:
$(function() {
$('.message_delete').on('ajax:success', function(event, data, status, xhr){
console.log(data); //to check if json is working
console.log($('.postHolder').last().data('micropost-id'));
});
});
这是我的控制器销毁操作:
def destroy
micropost = Micropost.find(params[:id])
respond_to do |format|
micropost.destroy
format.json { render :json => micropost } #just to check if json is working
end
end
现在我知道每个微博的ID,所以当一个微博被删除时,我使用jquery选择器找到页面上最后一个.postHolder div,获取该ID,然后使用该ID获取其后面的微博,并将该微博插入其中。这样,当一条消息被删除时,另一条消息会自动添加。
如果用户滚动加载更多消息,则不会丢失任何消息。我看过一些railscasts,看到Ryan Bates使用数据属性做类似的事情,并阅读了一些关于它们的文章,似乎给人留下了不好的印象。
我尝试想出其他方法来完成这个任务,但是想不到除了这种方式之外的更好的方法。也许这只是我的想法,但如果可能的话,我希望有另一个更好的解决方案。
谢谢
顺祝商祺