javascript - 使用 JQuery PeriodicUpdater 和 Rails 的消息流

Question

我正在尝试使用 jQuery 在我的 Rails 3 应用程序中创建一个 AJAX 消息流。该应用程序显示帖子和对帖子的回复。现在它需要用户刷新浏览器来更新:

//in app/views/posts/_replies.html.erb
<div class="replies">
  <% for reply in @replies %>
      <div class="reply">
          <p><%= reply.body %></p>
      </div>
  <% end %>
</div>

我正在尝试使用 PeriodicalUpdater (https://github.com/RobertFischer/JQuery-PeriodicalUpdater/) 的 jQuery 端口将回复 ajax 化为不断更新的流。

基于 Ryan Bates 的 Railscast (http://railscasts.com/episodes/136-jquery)，这是我得到的:

// in public/javascripts/application.js
$(document).ready(function(){
$.PeriodicalUpdater('/replies', {
    method: 'post',
    data: ???,
    minTimeout: 1000,
    maxTimeout: 8000,
    multiplier: 2,
    type: 'json',
    maxCalls: 0,
    autoStop: 0
}, function(data) {
          ????
});
});

我是 js 和 jQuery 的新手，所以我不太清楚如何将当前帖子传递给服务器，也不清楚如何让它自动呈现部分 replies。这是我的其余代码:

// in app/views/posts/show.js.erb
$("#replies").append("<%= escape_javascript(render 'replies') %>");

// app/controllers/posts_controller.rb
class PostsController < ApplicationController
  def replies
     @replies = Post.find(params[:id]).replies
     respond_to do |format|
       format.js
     end
  end
end

有什么方法可以将当前 post 的 ID 传递给 Controller ​​吗？甚至可以传递最后一个 reply 的 ID，这样服务器就只会发回新的回复？

此外，我是否必须手动将所有内容附加到 PeriodicalUpdater 的回调函数中？或者有没有办法为更新呈现 show 部分？

更新:我确实喜欢下面@Spencer 的建议，将其更改为首先有一个按钮，您可以按下该按钮来执行 AJAX 更新。

我在传递该参数时遇到问题。我的实际代码根据唯一的 URL 键查找内容，所以我只有:

<input type="button" value="Refresh" onclick="getReplies('<%= @post.url_key %>');" />

然后在我的 application.js 文件中:

function getReplies(url_key) {
$.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    url: "/replies",
    data: { url_key: url_key },
    success: function(msg) {
        $.each(msg.Replies, function(index, reply) {
            $("#replies").prepend('<p>' + reply.body + '</p>')
        });
    }
});
}

在我的 Controller 中，我有:

def replies
  @post = Post.find_by_url_key(params[:url_key])

  respond_to do |format|
    format.json { render :json => @post.replies }
  end
end

我得到:

Processing by PostsController#replies as JSON
Parameters: {"_json"=>"url_key=some-post"}
←[1m←[35mPost Load (1.0ms)←[0m  SELECT `posts`.* FROM `posts` WHERE (`posts`.`url_key` IS NULL) LIMIT 1

所以看起来参数没有从 params 中检索。

Answer 1

我想我在这里看到了几个问题。我建议稍微分解一下这个问题，因为正如您所说的，您是 jQuery 的新手。开始使用手动按钮通过 AJAX 检索最新的帖子。一旦你处理完了，然后转到定期更新程序。

我要推荐的第二件事是研究人们使用 jQuery 的各种模板方法。也就是说，您应该让 Ruby 简单地返回一个 JSON 数据结构，然后您可以让 jQuery 获取并用各种数据填充帖子模板。

这是我在我的一个网站上使用的模板方法示例。我从以下静态 HTML 开始。

    <table id="tblExpenses"><tbody>
        <tr>
            <th>Date</th>
            <th>Title</th>
            <th>Amount</th>
            <th>Attachments</th>
            <th colspan="2">&nbsp;</th>
        </tr>
        <tr class="expenseTemplate" style="display: none;">
            <td class="litDate"></td>
            <td class="litTitle"></td>
            <td class="litAmount"></td>
            <td class="litAttachments">test</td>
            <td><a class="lnkEdit" href="#">Edit</a></td>
            <td><a class="lnkDelete" href="#">Delete</a></td>
        </tr>
    </tbody></table>

然后我对存储在数据库中的费用执行 AJAX 请求，并动态创建新行以插入到费用表中。

function showTaxYear(taxYearId) {
    $.ajax({
        type: "GET",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        url: "/Services/GetExpensesByTaxYearId",
        data: { taxYearId: taxYearId },
        success: function(msg) {
            $.each(msg.Expenses, function(index, expense) {
                var row = $("#tblExpenses tr.expenseTemplate")
                    .clone()
                    .removeClass("expenseTemplate")
                    .show()
                    .addClass("expense")
                    .addClass("expenseid_" + expense.ID);
                row.find("td.litDate").text(expense.Date);
                row.find("td.litTitle").text(expense.Title);
                row.find("td.litAmount").text(expense.Total);
                row.find("a.lnkEdit").attr("data-id", expense.ID)
                                    .unbind().click(function() { editExpense($(this)); });
                row.find("a.lnkDelete").attr("data-id", expense.ID)
                                    .unbind().click(function() { deleteExpense($(this)); });
                if (expense.Attachment != "")
                    row.find("td.litAttachments").empty().append($("<a>View</a>").attr("href", expense.Attachment));
                else
                    row.find("td.litAttachments").empty();
                row.insertBefore("#tblExpenses tr.expenseTemplate");
            });
        }
    });
}

GetExpensesByTaxYearId 返回如下所示的 JSON 结果

{"Expenses":[{"ID":9,"Title":"Some expense","Description":"","Date":"02/02/2010","Amount":"$10.00","Tax":0.00,"Attachment":"","Total":"$10.00"}]}

完成后，您实际上可以检查是否已经通过执行 jQuery 搜索为从 Ruby 返回的任何数据创建了一个元素。例如，在我的示例中，我可以检查类 expenseid_<Identifier> 中是否存在元素。 .如果是这样，我已经支付了这笔费用。

我知道这可能有很多值得细细品味的地方，但流式传输 AJAX 内容对它来说意义重大。让我知道是否可以进一步澄清。