0

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

例如：我可以只听像点击我的菜单这样的事件，并像这样进行 ajax 调用来替换页面内容。

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

但这仍然只给了我一条路线/home。是否可以管理 rails 来监听诸如/home#posts,/home#contact等的路线home#about？

4

2 回答 2

2

url 的 # 部分实际上甚至从未到达服务器。仅供浏览器参考。所以，不，你不能让 rails 或任何其他服务器端框架监听基于散列的路由。

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

于 2013-10-17T09:27:07.417 回答
0

一个好的方法是使用pushState。

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

这个想法是将您的应用程序编写为经典的多页网站，然后使用事件处理 javascriptpushState路由popstate。

这具有主要优点：

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

处理历史是一个具有很多含义的深刻主题，因此您应该阅读有关它的文档（即使您使用帮助程序 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 );
});
于 2013-10-17T09:42:38.323 回答