【问题标题】：How to do history.js in Rails the right way?如何以正确的方式在 Rails 中执行 history.js？
【发布时间】：2012-04-10 21:17:37
【问题描述】：

大家好，

这是我第四次尝试在 Rails 应用程序中实现 history.js。我有一种运行良好的方法，但是代码太丑了。今天我又看了一遍代码，心想：我怎样才能让它变得更好、更容易、更干？！

到目前为止我所做的（工作还不错，并不完美）：

将remote: true 设置为我的链接
jquery-ujs 获取js.erb

我的 HTML 看起来像：

<body>
  <div id="content">
    some content with buttons, etc.
  </div>
</body>

js.erb 包含：

History.pushState(
  {
    func: '$(\'#content\').html(data);',
    data: '<%= j(render template: "news/index", formats: [:html]) %>'
  },
  'test title',
  '<%= request.url %>'
);

然后 history.js 获取该函数并为其提供数据。所以它用新生成的代码替换了content-div。它还会更新 URL。我必须将这段代码放入每个（！）js.erb 文件中。

我最后想让它不那么难看的想法是：

将remote: true 设置为我的链接
当一个链接被点击时，它会获取一些js.erb 来替换content-div
所有带有data-remote="true" 的链接都将获得ajax:success-handler
在 ajax:success 上，新 URL 被推送到 history.js

但是里面还有一个问题。然后我有 JavaScript 代码：

$(document).on('ajax:success', 'a[data-remote="true"]', function() { ... });

问题是：如果我替换链接（应该触发事件）所在的div-tag，ajax:success 永远不会触发。

也许有人可以解决我的问题...

或者有更好的方法吗？

【问题讨论】：

我已经多次查看 histoy.js 页面，但从未努力尝试过。我很想看到这个问题得到清晰的回答。
PJAX 仅支持 HTML5。 HTML4 浏览器只是获得普通链接......使用 history.js 我们也可以获得用于 HTML4 浏览器的 AJAX
但也许 PJAX 代码确实是答案，唯一的区别应该是，PJAX 使用 history.pushState 而我必须使用 History.pushState ;) 我会看看这个明天
您找到解决方案了吗？您首先遵循什么教程来提出这个问题？谢谢！
嗨，我没有遵循真正的教程。我刚刚获取了有关 history.js 的所有信息并将它们组合起来；）对于您的第一个问题：不，仍然没有解决方案 :(

标签： ruby-on-rails history.js

【解决方案1】：

我只用jquery-ujs和pushState，popState。

在这里查看我的答案：

https://stackoverflow.com/a/27532946/345996

【讨论】：

【解决方案2】：

怎么样：

History.Adapter.bind(window, 'statechange', function() {
    var state = History.getState();
    ...
});

【讨论】：

【解决方案3】：

我使用 beforeSend 事件作为所有数据远程的全局侦听器来更改浏览器的历史记录。我更喜欢 beforeSend 因为我希望链接在单击后立即更改，而不管 ajax 请求的结果如何...

$(document).bind('ajax:beforeSend', function(event,data){
    history.pushState(null, '', event.target.href)
});

这解决了您的问题，因为在对 DOM 进行任何修改之前触发了该事件。

【讨论】：

【解决方案4】：

你试过turbolinks 吗？这将是 Rails 4 中的默认设置。

【讨论】：