레일의 빌트인 헬퍼없이 AJAX를 사용하기위한 모범 사례?

Question

내 블로그 응용 프로그램에서 일부 게시물은 발췌문으로 표시됩니다. 즉, 사용자는 첫 번째 500자를보고 링크를 클릭하여 전체 게시물을 볼 수 있습니다. 다음은 관련 부분입니다.

<% href = url_for post_path(:id => post) %> 

<h1 class="title"><%= post.title %></h1> 
<h2 class="published_on"><%= post.author %> wrote this <%= time_ago_in_words(post.published_on)%> ago</h2> 
<div class="body"> 
    <% if defined?(length) %> 
    <%= truncate_html(post.body, :length => length, :omission => "&hellip;<h1><a class='more' href=\"#{href}\">Click here for more!</a></h1>") %> 
    <% else %> 
    <%= post.body %> 
    <% end %> 
</div> 

그러나 "여기를 클릭하십시오!" 사용자를 별도의 페이지로 가져 가면 나머지 게시물을 인라인으로 채우고 싶습니다. 나는 다음 AJAX을 내 application.js이 사업부의 ID를 사용

<div class="post" id="post_<%= post.id %>"> 
    <%= render :partial => 'post_content', :locals => { :post => post, :length => 500 } %> 
</div> 

: 현재, 나는 다음과 같은 사업부에 위의 코드를 넣어이 구현했습니다

$(document).ready(function() { 

    $("a.more").click(function() { 
    var url = $(this).attr('href'); 
    var id = url.split("/")[2] 
    $.get(url, null, function(data) { 
     $("#post_" + id).html(data);  
    }); 
    return false; 
    }); 

}); 

이것은 분명히 역겨운입니다 - 내 자바 스크립트 링크의 href에서 게시물의 ID의 위치에 의존하고 싶지 않아요,하지만 자바 스크립트에 대한 어떤 다른 방법을 알고 있기 때문에 어떤 게시물을 받고 따라서 div를 삽입해야합니다.

이 작업을 수행하는 가장 좋은 방법은 무엇입니까? 레일스의 AJAX 도우미를 사용해야할까요?

Answer 1

호레이스, 맞습니다. Rails 헬퍼가 전혀 필요하지 않습니다. 눈에 잘 띄지 않는 JavaScript Nirvana를 얻으려면 잘하지 않으면 안됩니다. (미안 Marc!)

가능한 경우 JS를 사용하지 않는 것을 의미합니다. 실제로 느슨하게 결합 된 상태로 유지하려고 시도하지만 완전히 분리되지는 마십시오. 우리가 준 예제에서, HREF와 작업 할 URL이 있기 때문에 쉽습니다. JS는 요청하는 방법을 "알 필요"가 없습니다.

HREF의 링크를 통해 맹목적으로 링크를 보내고 Rails가 Ajax 응답 (즉, 레이아웃 없음)으로 응답하는 방법입니다.

해결 방법 :

<!------- Your HTML ------> 
<h1 class="title">Schwein Flu Strikes Again</h1> 
<h2 class="published_on">B.Obama wrote this 2 seconds ago</h2> 
<div class="body"> 
    SUMMARY SUMMARY 
    <h1><a class='more' href="/post/1234">Click here for more!</a></h1> 
</div>

/********* Your JavaScript ***********/ 
$(document).ready(function() {
 

$("a.more").click(function() { $containing_div = $(e).parents('div.body'); var url = $(this).attr('href'); $.ajax({ beforeSend : function(request) { request.setRequestHeader("Accept", "text/javascript"); }, /* Included so Rails responds via "format.js" */ success : function(response) { $(containing_div).empty.append(response); }, type : 'get', url : url }); return false; });
 

});

########### Your Controller ########### 
def show 
    @article = Post.find(param[:id]) 
    respond_to do |format| 
    format.html { render :action => "show" and return } 
    format.js { render :partial => "post_content", :layout => false and return } 
    end 
end

이것은 또한 당신이 처리 할 수 ​​비슷한 편안하고 경로 나 있다고 가정/후/: ID

그리고 우리가 완료! 나는 우리 모두를 위해 뭔가가 있다고 믿습니다. : D

Answer 2

제 생각에는 이런 종류의 문제에 대해서는 레일즈 헬퍼를 사용해야합니다.

My post bla bla bla <span id="more_of<%=post.id%>">more</span> 

이 더 많은 링크는 다음과 같습니다 :

<%= link_to_remote("more",:update => "more_of_#{your_post.id}",:url =>{:controller => "myposts", :action=>"show_more", :id => your_post.id}, %> 

을 그리고 컨트롤러는 같은 것을 할 것 :

HTML처럼 갈 것입니다 수

post = Post.find_by_id(params[:id]) 
render :text => post.content.slice(100..post.content.size) 

다른 방법을 모든 것을로드 한 다음 숨기기 만하면됩니다.

bla bla bla this is my post blah <div style="display:none" onclick="this.style.display='block';">and this is the rest of the article</div> 

(div 태그에 onclick을 IE에서 깰 수 있지만 이것은 당신에게 아이디어를 제공하는 것입니다) 당신은 '레일을 피하는 좋은 이유가없는 한 갈 수있는 가장 좋은 방법이 될 것이라고 나에게

을 도우미.

도움이 되길 바랍니다.

Answer 3

이 경우, 나는 당신이 AJAX 호출을해야한다고 생각하지 않는다. 당신은 이미 post.body에 원래 게시물의 전체 내용을 가지고있다. (당신은 db로부터 단지 500 문자를 가져 오지 않았다.) JQuery를 사용하여 아약스 호출을하는 대신, 500자를 초과 한 내용을 숨기고, '더보기'링크를 클릭하면 나머지 div가 표시됩니다. 클라이언트 측에서이 작업을 완전히 수행하고 ajax를 절약 할 수 있습니다. 당신의 부분에

:

<div class="body"> 
    <%= post.body %> 
</div> 

귀하의 JQuery와 :

var fullText = $('div.body').html(); 
$('div.body').html(fullText.slice(0,499) + '<a class="more" href=\"#\">Click here for more!</a>'); 
$('a.more').live('click', function(event) { 
    this.parent().html(fullText); 
    return false; 
}