3

私のブログ アプリケーションでは、いくつかの投稿が抜粋として表示されます。つまり、ユーザーには最初の (たとえば) 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>

ただし、「詳細はこちらをクリックしてください」ではなく、ユーザーを別のページに移動して、残りの投稿をインラインで入力したいと思います。現在、上記のスニペットを次の div に配置して、これを実装しています。

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

次に、application.js でこの div の ID を使用して AJAX を実行します。

$(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;
  });

});

これは明らかにうんざりです-JavaScriptがリンクのhref内の投稿のIDの場所に依存することを望んでいませんが、JavaScriptがどの投稿を取得しているのか、したがってどの投稿を取得しているのかを知るための他の方法はわかりませんdiv コンテンツを挿入する必要があります。

これを達成するための最良の方法は何ですか? Rails の AJAX ヘルパーの使用に戻る必要がありますか?

4

3 に答える 3

7

ホレス、あなたは正しいです。Rails ヘルパーはまったく必要ありません。目立たない JavaScript の涅槃を達成するには、それらを避けるのがよいでしょう (申し訳ありませんが、Marc!)。

邪魔にならない JS とは、可能であれば埋め込み 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

これは、/post/:id を処理するための RESTful ルートなどがあることも前提としています。

これで完了です。その中には、私たち全員にとって何かがあると信じています。:D

于 2009-05-02T16:50:03.297 に答える
1

この場合、AJAX 呼び出しはまったく必要ないと思います。元の投稿のコンテンツ全体がすでに post.body にあります (db から 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;
}
于 2011-06-18T06:54:22.173 に答える
0

この種の問題については、Rails のヘルパーを使用する必要があると思います。

HTML は次のようになります。

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}, %>

そしてコントローラーは次のようなことをします：

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 で壊れる可能性がありますが、これはアイデアを提供するためのものです)

Railsのヘルパーを避ける正当な理由がない限り、それが最善の方法です。

それが役立つことを願っています

于 2009-04-29T18:48:40.057 に答える