将不显眼的 JavaScript 与 Pusher 相结合答案

【问题标题】：Combining unobtrusive JavaScript with Pusher将不显眼的 JavaScript 与 Pusher 相结合
【发布时间】：2011-05-28 03:29:57
【问题描述】：

我正在使用 Pusher 向我的 Rails 应用程序添加实时页面更新。

以下是 Pusher 工作原理的简要概述（稍后我将向您展示我希望它做什么）：

控制器：

class ThingsController < ApplicationController
  def create
    @thing = Thing.new(params[:thing])

    if @thing.save
      Pusher['things'].trigger('thing-create', @thing.attributes)
    end
  end
end

Javascript（在<head>...</head>）：

var pusher = new Pusher('API_KEY');
var myChannel = pusher.subscribe('MY_CHANNEL');
myChannel.bind('thing-create', function(thing) {
  alert('A thing was created: ' + thing.name); // I want to replace this line
});

我想用 ajax 请求替换注释行以触发一些不显眼的 JavaScript。假设我有文件 app/views/things/index.js.erb：

$("things").update("<%= escape_javascript(render(@things))%>");

我应该在myChannel.bind回调中写什么来触发上面的代码执行？

【问题讨论】：

您是否正在通过 AJAX 创建Thing？还是只是一个标准的 HTTP 请求？
嘿，在阅读了你的多个问题后，我刚刚完成了这个，并为你写了一个答案。检查我在下面发布的答案。谢谢。
谢谢@joel，稍后我会看看并发表评论。

标签： ruby-on-rails jquery real-time unobtrusive-javascript

【解决方案1】：

你并不是真的在这里比较苹果。

您正在将 XHR 请求中呈现的模板与 things/index 与来自 POST 到 things/create 的 @thing 对象的属性进行比较。

您需要在网络浏览器中处理从 Pusher 返回的 thing 对象并相应地修改 DOM。

或者，一个更简单的解决方案可能是让您的控制器将格式化的 HTML 发送到 Pusher，而不是对象属性。然后，您的 javascript 代码可以只插入格式化的 HTML，而不是尝试解析 thing 对象并手动修改 DOM。

回复@user94154 的评论：

免责声明：在您提出问题之前，我从未听说过 Pusher。

这确实会产生挑战 b/c 通常您的 HTML 在视图中已格式化，但您必须从控制器向 Pusher 发送数据。我可以想到几种方法来做到这一点：

如果 HTML 标记不多，您可能想要打破“不要重复自己”的规则，在控制器中重复 HTML 标记并将其发送到 Pusher
如果有很多标记，我会将我的视图生成代码抽象为帮助程序。您也可以从控制器中调用助手。

在客户端，你应该有一个空的 div（或一些 DOM 元素）来保存来自 Pusher 的 HTML。并做这样的事情：

myChannel.bind('thing-create', function(thing) {
  $("div#thing_holder").html(thing.html);
});

【讨论】：

我该如何做最后一个选项，客户端对服务器进行 ajax 调用，并从响应中的特定部分取回 html？
感谢您的回复。选项 1 没有回答我的问题——我知道通过重复自己，我可以很容易地解决这个问题（至少在短期内）。因此，关于选项 2，您是说我从控制器中的帮助程序获取空 HTML，将其发送到模板，然后使用 Pusher 回调填充内容？
不，辅助方法提供格式化的 HTML，您的控制器和视图使用。

【解决方案2】：

http://blog.new-bamboo.co.uk/2010/5/12/integrating-pusher-into-a-complex-app-in-one-day

有点过头了，但我认为这可能会让你走上正轨。

【讨论】：

【解决方案3】：

pjax 可能是您正在寻找的。 README 中包含如何在 Rails 中开始使用它。

【讨论】：

【解决方案4】：

我明白了，这就是你的做法......

尝试在这里写，但代码缩进等不适用于较长的内容...

http://jbeas.com/ruby-on-rails/rails-3-pusher-app-and-unobtrusive-js/

【讨论】：