使用 jQuery Address 插件和 Rails 3 远程链接进行双重远程调用

Question

我正在使用这个 jQuery 插件
http://www.asual.com/jquery/address/
因为我有一个完整的 ajax 网站在 Rails 3.1.0 中被黑，但我的操作/方法也响应 html 请求。

如果我有链接

<%=link_to "my link",{:controller=>"my_controller",:action=>"my_action"},:remote=>true%>

它会进行调用，但 URL 将保持不变，如果我共享 URL，您将始终查看根页面 / 页面但使用此插件我可以调用 my_controller 的远程方法并使用

更改显示网址

var elemetns = $("a.addressPlugin");
 $.address.crawlable(1).state('/').init(function(){
    elemetns.address();
 });

我的新链接

<%=link_to "my link",{:controller=>"my_controller",:action=>"my_action"},:class=>"addressPlugin",:remote=>true%>

现在我的网址看起来像

http://localhost:3000/my_controller/my_action

但是当我回击浏览器时，页面保持不变

然后我想这样做

var elemetns = $("a.addressPlugin");
 $.address.crawlable(1).state('/').init(function(){
    elemetns.address();
 }).change(function(e){
        $.ajax({type:'GET',url:e.path,dataType:'script',cache:true});
 });

所以现在它可以前后移动，但是 ....

当我单击链接时，它会进行两次远程调用....一次用于链接本身，一次用于.change(... 方法....但是当我向后退时它可以完美运行，它只会调用一次.change(... 方法....所以

如何防止$.ajax 仅在浏览器上向后和向前而不是在单击链接时进行调用，因为它们已经自己进行了调用？

>
在 Safari 和 Chrome 浏览器中，当我从主页退一步进入历史记录，然后使用浏览器的按钮向前导航时，我得到一个完整的白屏，仅显示通过 ajax 加载我的main/index 视图的 javascript 函数，但仅此而已在浏览器中

基本上这就是我想要复制的内容，但使用 ruby​​ on rails 和他们的 remote links

http://www.asual.com/jquery/address/samples/state/

Answer 1

让后退按钮在单个页面界面上正常工作的一种方法是在 URL 中使用哈希。 Twitter 就是一个这样做的网站。

哈希告诉浏览器我们只是移动到当前页面上的锚点，因此页面不会重新加载，但 URL 会添加到浏览器历史记录中。这意味着如果您使用 Javascript 正确处理 URL 并根据 URL 片段（哈希后的部分）加载您想要的内容，那么后退按钮应该仍然可以正常工作。

我无法详细说明如何将其集成到您的应用程序中，但如果您可以使用/my_controller#my_action 而不是/my_controller/my_action，您应该能够完成这项工作。 Javascript 需要使用基于 URL 片段的 AJAX 加载页面内容。

以下是一些可能对您有所帮助的链接：

• What's the shebang/hashbang (#!) in Facebook and new Twitter URLs for?
• http://itsnat.sourceforge.net/php/spim/spi_manifesto_en.php

Answer 2

为什么要使用.change 事件绑定器？尝试改用.click 事件绑定器。另外，将其设为return false; 以防止默认操作。

var elemetns = $("a.addressPlugin");
$.address.crawlable(1).state('/').init(function(){
    elemetns.address();
}).click(function(e){
    $.ajax({type:'GET',url:e.path,dataType:'script',cache:true});
    return false;
});

Answer 3

我会尝试让链接执行一个检查全局标志的事件处理程序。然后在地址的change 事件中，我将检查该标志，并且仅在未设置时执行该操作。

例如：

var throughNormalLink = false;

$.address.crawlable(1).state('/').init(function(){
    elemetns.address();
}).change(function(e){
    if(!throughNormalLink)
        $.ajax({type:'GET',url:e.path,dataType:'script',cache:true});
    else // Update: reset the flag
        throughNormalLink = false;
});

$("a").click(function() {throughNormalLink = true; .../* the rest of your code */});