在没有 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 必杀技，您最好避免使用它们（对不起 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() { 
      $ contains_div = $(e).parents('div.body'); 
      var url = $(this).attr('href'); 
      $.ajax({ 
          beforeSend : function(request) { request.setRequestHeader("接受", "text/javascript");   }, 
                          /* 包含在内，以便 Rails 通过“format.js”响应 */ 
          成功：函数（响应）{ $（包含_div）.empty.append（响应）;   }, 
          类型：'获取'， 
          网址：网址 
      }); 
      返回假； 
    });

  <代码>});

########### 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 路由或类似的路由来处理 /post/:id

我们就完成了！ 我相信这对我们所有人都有好处。 ：D

Answer 2

在这种情况下，我认为您根本不应该进行 AJAX 调用。 您已经在 post.body 中拥有原始帖子的全部内容（您没有从数据库中仅获取 500 个字符），而不是使用 JQuery 进行 ajax 调用，而是使用它来隐藏超过 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;
}

Answer 3

我认为对于这类问题你应该使用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 的助手。

希望有帮助