Rails에서 데이터베이스의 첫 번째 레코드를 얻고 Ajax로 다른 레코드를로드하려면 어떻게해야합니까?

Question

많은 이미지가 포함 된 슬라이더가 있습니다. 첫 번째 이미지를로드하고 나서 페이지로드가 완료된 후 Ajax를 하나씩로드합니다.

두 개 이상의 이미지가있는 경우 슬라이더를 실행하고 싶습니다. 세 번째 이미지가로드되면 다른 이미지에 추가되며, 모든 이미지가로드되지 않으면 계속됩니다.

레일즈 3.2 및 jQuery를 사용합니다. 그것은 의미가 있습니까? 어떻게해야합니까?

Answer 1

좋아, 슬라이더를 테이블 구조가 필요한 일종의 자바 스크립트 기즈모라고 가정합니다. 따라서 가장 먼저 알아야 할 사항은 기존 테이블에 행을 삽입하는 방법입니다. 해당 테이블에 새로운 행을 삽입, 자바 스크립트를 통해, 당신은 할 수 있어야

<table id='slider'> 
    <tr> 
    <td class='si'> 
     <img.... > 
    </td> 
    </tr> 
</table> 

:

당신이 단지 하나 개의 이미지를 가지고 초기 페이지로드 후 다음 HTML을 생성하는 가정합니다. 이 시점에서 jquery를 사용한다고 가정해야합니다. 여기에 몇 가지 JQuery와 있습니다 : 다음

<table id='slider'> 
    <tr> 
    <td class='si'> 
     <img.... > 
    </td> 
    </tr> 
    <tr><td>Hi!</td></tr> 
</table> 

다시 같은 자바 스크립트를 실행하고 : 당신이 JQuery와 실행을 유발하는 경우

$('#slider:last-child').append("<tr><td>Hi!</td></tr>"); 

, 귀하의 DOM은 포함됩니다

<table id='slider'> 
    <tr> 
    <td class='si'> 
     <img.... > 
    </td> 
    </tr> 
    <tr><td>Hi!</td></tr> 
    <tr><td>Hi!</td></tr> 
</table> 

의 그 jquery 코드의 중요한 부분이지만, 어디로 가고, 어떻게 당신은 그것을 올바른 만들 수 있습니까?

글쎄, jquery 코드를 호출하는 것은 각 AJAX 호출이 다음 이미지를 가져온 후에 발생해야합니다. 따라서 해결해야 할 다음 문제는 AJAX를 통해 한 번에 하나씩 모든 이미지를 반복하는 방법입니다.

브라우저에서 유지 관리되는 JavaScript 변수, 모든 이미지의 색인 인 변수가 필요합니다. 적어도 페이지로드시 최대 이미지 수를 확보해야합니다. 당신은이 작업을 수행 할 수 있습니다 :

show.html.erb :

<script type='text/javascript'> 
    $(document).ready(function() { 
    var maximage = <%= @maximage %>; 
    var curimage = 0; 
    }); 
</script> 

일이 위해서는, 당신은 @maximage을 설정해야합니다.

응용 프로그램/컨트롤러/pages_controller.rb :

var maximage = 12; 
var curimage = 0; 

:

class PagesController < ApplicationController 
    before_filter :prep_images , :only => [:show] 
    def prep_images 
    @maximage = @page.slider_items.length 
    end 
end 

그래서 DOM을 준비 이벤트가 발생에서, ERB 확장 덕분에, 당신의 HTML에 포함 된 스크립트 섹션을 포함합니다 거기에 12 이미지가 있다고 가정합니다.

이 시점에서 네임 스페이스 충돌을 언급해야합니다. maximage는 사용하는 다른 자바 스크립트 라이브러리에서 사용되는 변수가 될 수 있습니다. 그게 사실이라면이 문제를 해결해야하지만 충돌이 없다고 가정합니다.

좋아, 지금이 게시물을 구성 해왔다.내가 올바른 길을 가고 있다고 생각하면 알려주고, 나머지는 자세히 써 보겠습니다.