2014-09-05 3 views
0

당분간 프런트 엔드 프레임 워크로 들어가는 것을 피하기 위해 레일즈 및 jQuery 만 사용하여 단일 페이지 응용 프로그램을 작성합니다. 사용자가 제 방문 앱이 그들이 complex_query_1에서 @items을 나타내는 경우Rails + jQuery SPA 라우팅

class MainController < ApplicationController 

def index 
    respond_to do |format| 
    format.html 
    end 
end 

def complex_query_1 
    @items = # complex query 

    respond_to do |format| 
    format.js { render 'refresh.js.erb', :locals => { :items => @items } } 
    end 
end 

def complex_query_2 
    @items = # a different complex query 

    respond_to do |format| 
    format.js { render 'refresh.js.erb', :locals => { :items => @items } } 
    end 
end 

end 

$(document).ready(function() { 
    showActivityIndicator(); 
    $.get(Routes.complex_query_1_path()); 
}); 

를 application.js

컨트롤러 :

여기서 기본 구조이다. 실행하는 쿼리에 대해 오랜 시간을 피하기 위해, 나는로드보다 "SPA"스타일 구현했습니다 :

  1. 사용자가 응용 프로그램을 방문

    index 조치가 해고 및 기본 레이아웃을 제공합니다.

  2. 그러면 로딩 표시기와 complex_query_1에 대한 POST 요청이 js를 통해 실행됩니다.

  3. 조치는 js에 응답하고 jQuery를 통해보기를 새로 고칩니다.

모든 내부 링크는 AJAX이므로 기본 레이아웃은 결코 다시로드되지 않고 "SPA"느낌을 유지합니다.

나는 앱 외부에서 라우팅으로 장애물을 맞았습니다. 예를 들어 앱 외부에서 /complex_query_2으로 이동하면 html 레이아웃이 제공되지 않습니다. format.html 레이아웃을 지정할 수 있지만 html이 제공되기 전에 긴 쿼리가로드되어야합니다.

SPA 느낌을 위해 앱을 구성하는 대안/더 좋은 방법이 있습니까?

답변

0

일부 앱에서 사용하는 한 가지 해결책은 URL의 조각을 사용하여 응용 프로그램의 응답 방식을 결정하는 것입니다.

그래서 외부 링크는

/index#complex_query_2 

는 인덱스 경로는 HTML 레이아웃을 제공 할 수 있어야합니다, 당신은 complex_query_2 부분을 얻기 위해 자바 스크립트 URL을 구문 분석 할 수 있습니다. 그런 다음이를 사용하여 어떤 조치를 취해야하는지 결정하십시오.