logo标签列表

如何在Rails中正确地使用history.js？

ruby-on-railshistory.js
5

大家好，

我已经尝试四次在Rails应用程序中实现history.js。 我有一种方法运行得相当不错，但代码非常丑陋。今天我再次查看了代码，并想到：我该如何使其更好、更容易、更DRY？！

目前我所做的（运行得相当不错，但并非完美）：

  • 将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处理程序
  • 在ajax:success上，新URL将推送到history.js中

但内部仍然存在一个问题。然后我有JavaScript代码:

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

问题是：如果我替换包含链接（应该触发事件的链接）的
标签，则ajax:success永远不会触发。
也许有人能解决我的问题...
或者有更好的方法吗？
我已经多次查看了history.js页面，但从未努力尝试过。我很想清楚地看到这个问题的答案。 - Ashitaka
PJAX仅支持HTML5。对于HTML4浏览器，只会提供普通链接...但是借助于history.js，我们可以让HTML4浏览器也能获得AJAX。 - Benjamin M
但也许 PJAX 代码确实是答案，唯一的区别应该是 PJAX 使用 history.pushState 而我必须使用 History.pushState ;) 我明天会看一下。 - Benjamin M
你有找到解决方案吗？你最开始是按照哪个教程来实现的呢？谢谢！ - Ashitaka
嗨，我没有遵循任何真正的教程。我只是收集了有关history.js的所有信息并将它们组合起来;) 对于你的第一个问题：不，仍然没有解决方案:( - Benjamin M
我同意：PJAX是应该选择的方式。对于你可能执行的少量POST和PUT操作（我还没有看到PJAX能很好地与<form>一起使用），你可以用history.js作为补充。 - KendallB
4个回答
2
0

这个怎么样：

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

我正在使用beforeSend事件作为全局监听器来处理所有data-remote的历史记录浏览器问题。 我更喜欢beforeSend，因为我希望在链接被点击后立即更改，而不管ajax请求的结果如何...

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

这可以解决你的问题，因为事件在对DOM进行任何修改之前就被触发了。

-2

你试过turbolinks吗？ 它将成为Rails 4的默认设置。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接