没有Rails的内置助手使用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>

但是,而不是"点击此处获取更多信息!" 将用户带到一个单独的页面,我希望它能够填充内联的其余部分.目前,我已经通过将上面的代码片段放在以下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助手吗？

Answer 1

霍勒斯,你是对的.你根本不需要Rails助手.要实现不引人注目的JavaScript Nirvana,你最好避免它们(对不起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

这也假设你有RESTful路由或类似handle/post /:id

我们完成了!我相信对我们所有人来说都有一些东西.:d