레일에서 부분 페이지를 비동기적으로 로드하는 방법

레일에서 부분 페이지를 비동기적으로 로드하는 방법

Ruby on rails / jquery 앱을 만들 때 페이지 생성에 시간이 걸리는 부분이 있습니다.

대부분의 페이지가 바로 로드되도록 페이지 로드 방법을 변경하고 시간이 걸리는 부분을 비동기적으로 로드하도록 플레이스 홀더를 예약하여 완료 시 ajax / jquery를 사용하여 페이지에 삽입하고 싶습니다.

지금까지의 내용(간단화):

app/sampling/sample/show.disc.erb:

<div id="theResult">
    <%= render :partial => 'calculate', :object => @org) %>
</div>

그리고 partial은 일부 @org를 사용하여 콘텐츠를 생성합니다(다른 외부 REST 서비스 중지).

app/communications/sample/_communications.erb

<%
    # code to take org and turn it into content
%>
<!--...html to display results here -->

내 부분에는 논리가 너무 많은 것 같기 때문에 이것이 적절한 MVC 아키텍처 규칙을 위반하고 있다는 것을 깨달았습니다.그것도 정리하고 싶습니다.

그래서 저는 두 가지 질문이 하나 있다고 생각합니다. (1) 어떻게 하면 작동시킬 수 있는지, (2) 어떻게 하면 좋은 루비/레일/mvc 관행을 따르게 할 수 있는지.

먼저 주 응답에 빈 자리 표시자 div를 넣으십시오.

<div id="pink-dancing-elephants"></div>

페이지에 jQuery를 조금 추가합니다.

$.ajax({
    url: "/elephants/dancing",
    cache: false,
    success: function(html){
      $("#pink-dancing-elephants").append(html);
    }
});

/elphants/dancing/pink에 대한 응답으로 div를 채우고 싶은 HTML의 blob을 반환하는 액션을 수행합니다.AJAX 요청에 의해 호출된 액션에서는 :syslog => false로 렌더링하여 반환된 HTML의 blob이 프레임 전체를 포함하지 않도록 할 수 있습니다.예.

# elephants_controller.rb
def dancing
  @elephants = #whatever
  render :layout => false
end

그러면 템플릿이 뷰/코끼리/dancing.html.erb로 렌더링됩니다.

@cailinanne에 비해 간단한 방법이 있습니다.

같은 예를 사용하지만, 저는 이 기술을 사용하여 div를 업데이트하는 경향이 있습니다. 그래서 먼저 div가 부분적인 값을 갖게 됩니다.

<div id="pink-dancing-elephants">
   <%= render "elephants/dancing", elephant: some_thing  %>
</div>

단, jQuery 로드 방식을 사용합니다.

$("#pink-dancing-elephants").load("/elephants/dancing");

이렇게 하면 전체 부분이 반환됩니다.반드시 layout: false를 사용하고 필요에 따라 파라미터를 설정합니다.저는 이런 파셜을 쓰는 편이에요.

# elephants_controller.rb
def dancing
  render "elephants/_dancing", 
         locals: { elephant: some_thing },
         layout: false
end

그러면 템플릿이 뷰/코끼리/_dancing.html.erb로 렌더링됩니다.

뷰에서 렌더 호출 시 컨트롤러 메서드 이름의 일부 밑줄과 사용하지 않는 방법에 주의하십시오.

언급URL : https://stackoverflow.com/questions/6701623/how-to-asynchronously-load-a-partial-page-in-rails