带导轨的单页应用方法

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

URL的＃部分实际上甚至从未到达服务器。仅供浏览器参考。因此，不，您不能使Rails或任何其他服务器端框架侦听基于哈希的路由。

但是，您可以使用这些新的MV * JavaScript框架（例如Ember和AngularJS）来处理哈希路由，因此请仔细研究它们。我几乎没有用过它们，但是对于单页应用程序，它们仍然比jQuery更好地为您提供服务。

Answer 2

一种好的方法是使用pushState。

[这允许您在现代浏览器上更改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 );
});