Javascript 使用rails的单页应用程序方法

如何在仍然具有可链接路由的rails中实现单页应用程序

例如： 我可以只听我菜单上的点击之类的事件，然后做类似这样的ajax调用来替换页面内容

$.ajax({
    url: "/home/posts",
    cache: false,
    success: function(html){
      $("#postFeed").append(html);
    }
});

但这仍然只给了我一条路线

/home

。 有没有可能管理rails来监听诸如

/home#posts

，

/home#contact

，

home#about

等路由

url中的#部分实际上从未到达服务器。这只是供浏览器参考。所以，不，您不能让rails或任何其他服务器端框架侦听基于哈希的路由

---

然而，您可以使用这些新的MV*javascript框架，如Ember和AngularJS来处理散列路由，所以请仔细研究它们。我几乎没有使用过它们，但对于一个单页应用程序来说，无论如何，它们会比jQuery为您提供更好的服务。

一个好方法就是使用它们

这允许您在现代浏览器上更改url，同时仍保持在同一页面上（因此，在相同的javascript执行环境中）

我们的想法是将应用程序编写为一个经典的多页面网站，然后使用

pushState

和

popstate

事件处理javascript路由

这有主要优势：

• 您的完整网站仍然有唯一的URL，用户可以直接访问
• 因此，它可以通过搜索引擎进行索引
• 较老的浏览器用户只是正常地跟随链接，并进行全页刷新，所以它会优雅地降级

处理历史是一个有很多含义的深刻主题，因此您应该阅读有关它的文档（即使您使用帮助器javascript框架为您处理历史），但以下是基本内容：

$( 'a' ).click( function( event ){
  // check if pushState is supported
  if ( window.history && window.history.pushState ){
    var $link = $( this );
    event.preventDefault();

    // change url
    history.pushState( {}, '', $link.attr( 'href' ) );

    // call your page change handler, which typically
    // request content, add it in page and show it
    // with animation - you're responsible of implementing
    // this `change_page` method
    change_page( $link.attr( 'href' ) );
  }
});

// triggered when user press the back button
// *and* on page load
$(window).on( 'popstate', function(){
  // does the page change
  change_page( window.location.href );
});

---

好啊因此，在Rails框架内实现这一点是不可能的。如果我使用这些框架，如Angular主干等，我需要让它们处理路由。那我为什么还要麻烦使用Rails呢？Rails往往是一个最好用于创建后端/API的框架。我错了吗@是的，rails最适合后端/API。如果您使用的是Angular或Ember之类的前端框架，那么您很可能还需要一个后端框架来为前端框架提供一个API，以便与之通信。Rails在这方面会很好。这非常有趣。我以前从未使用过pushState。感谢您分享一个非常好的方法！