Question

如何在仍具有可链接路由的rails中执行单页应用程序？

例如：我可以直接听取菜单上的点击等事件，并执行这样的ajax调用来替换页面内容。

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

但这仍然只给我一条路线/home。是否可以管理rails以收听/home#posts，/home#contact，home#about等路线。

Answer 1

网址的＃部分实际上从未进入服务器。这只是浏览器的参考。所以，不，你不能让rails或任何其他服务器端框架监听基于散列的路由。

但是，您可以使用这些新的MV * javascript框架（如Ember和AngularJS）来处理散列路由，所以请查看它们。我几乎没有使用它们，但是对于单页应用程序，无论如何它们都会比jQuery更好地为你提供服务。

Answer 2

一个好的方法是使用pushState。

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

我们的想法是将您的应用编写为经典的多页面网站，然后使用pushState和popstate事件处理JavaScript路由。

这有很大的优势：

您的完整网站仍有用户可以直接访问的唯一网址
因此可以被搜索引擎索引
旧浏览器用户只需正常关注链接，完整页面刷新，因此会优雅地降级

处理历史记录是一个涉及很多含义的深层主题，所以你应该阅读有关它的文档（即使你使用帮助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的单页面应用程序方法

2 个答案: