大家好，

Question

大家好，

现在是我第四次尝试在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 - 处理程序
在ajax:success上，新网址会被推送到history.js

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

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

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

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

或者有更好的方法吗？

Answer 1

我只使用jquery-ujs和pushState，popState。

请在此处查看我的回答：

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

Answer 2

怎么样：

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

Answer 3

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

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

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

Answer 4

你试过turbolinks吗？它将是Rails 4中的默认值。

如何以正确的方式在Rails中做history.js？

大家好，

到目前为止我做了什么（并且工作得很好，不完美）：

我最后想让它变得不那么难看了：

或者有更好的方法吗？

4 个答案: