0

我有一个微博/评论系统，每次提交新的微博或评论时，页面都会刷新以显示它。

因为我已经在我的表单上设置了 ajax，所以我现在希望在不刷新页面的情况下添加或添加微博。

到目前为止，我有：

if @micropost.save
  format.js   { render :post_on_wall }
else
  format.js   { render :form_errors }
end

您无需成为 ruby​​ on rails 专家即可了解此代码段中发生的情况。如果表单通过了所有验证并且用户在单击发布之前实际上输入了有效的内容，那么“如果@micropost.save”将为真，它将在我命名为“post_on_wall”的文件中执行 js。如果 "@micropost.save" 将执行 "form_errors" 中的代码。

在 form_errors 中，我添加了一个警报，只是为了检查当用户不输入任何内容并点击帖子时微博不会被发布。它工作正常。

在“post_on_wall”文件中，我有这个：

$('.microposts').prepend('<%= j render("users/partials/microposts") %>');

这样做的问题是它基本上抓取了正在呈现“users/partials/ microposts ”的文件中循环的所有微帖子，然后将它们放在“.microposts”div中的所有内容之上。即使是位于“.microposts”顶部的发布微博的实际表单也被推到刚刚添加到页面的内容下方。

这是我的html结构。

<div class='cf' id='content'>
    <div id='leftColumn'>
    </div>
    <div class='microposts'>
    </div>
    <div id='rightColumn'>
  </div>
</div>

每个微博及其相关评论都存储在一个名为“.postHolder”的类中。

我觉得我的做法是错误的。这个文件：“users/partials/microposts”指向的文件基本上有代码，可以帮助一次显示 10 个微博。这用于与我正在尝试做的完全不同的事情（分页+无限滚动）。

无论如何，我觉得我应该处理的方法是如何检测刚刚发布的新帖子。它应该被检测为一个新的“.postHolder”类，然后在发现它之后应该将它添加到“postHolder”列表的顶部，而不是替换它上面的微帖子表单。

我正在考虑创建一个单独的 div 来保存所有微帖子，然后将此 div 放在微帖子表单下方。这样我就不必担心表单被推下，因为它不会在 div 里面包含实际上将是我将要准备的所有微博。

无论如何，我真的很想要一个可以帮助我实现此功能的示例或一些好的建议。

感谢您的时间亲切的问候。

4

2 回答 2

1

基于您的假设

  1. 想要按时间降序排列的帖子
  2. 希望尽量减少您必须返回以进行更新的数据量

我建议您在成功提交帖子后，向服务器发起 AJAX 调用以获取比上次显示的帖子更新的所有帖子。假设您的后置 HTML 可以这样总结

<div id='microposts'>
    <form id='new_post'></form>
    <div class='postholder' id='some-id-number'></div>
    <div class='postholder' id='some-older-id-number'></div>
    ...
</div>

我会从服务调用中获取新帖子作为返回的 html

function getNewPosts(){
    $.ajax({
        url: 'Your-New-Posts-Url',
        data: {lastId: $('.postholder:first').attr('id')},
        success: function(newPosts){
            if(newPosts && newPosts.length > 0){
                $('.postholder:first').before(newPosts);
            }
        }
    });
}

您还可以使用 setTimeout 作为心跳来每隔一段时间调用 getNewposts。

于 2012-04-09T17:10:27.937 回答
0

要回答标题问题“JQuery 可以在新类出现时检测它们吗？”：不能。

将新元素添加到页面 ( DOMNodeInsertedIntoDocument) 时会触发一些事件，但这绝对是低效的（并且已弃用）。

.trigger()更好地在添加新元素的代码中使用 jQuery 方法触发自定义事件。有了它，您可以通知独立模块有新元素。

但是当您在寻找新元素的事件处理程序注册时，您可能应该看看 jQuery 的.live()方法。

于 2012-04-09T16:50:34.943 回答