Question

我有一个有很多帖子的故事模型。我在索引视图中列出故事而没有每个故事的帖子。当用户点击索引视图中的其中一个故事时，我想通过使用ajax .load函数调用故事/（story_id）/帖子来加载该故事的帖子，并确保将帖子放入该故事的正确div（已创建）通过“＆lt;％= div_for（story，”posts_bucket_for“）do％＆gt;”）

问题是，我不知道如何将正确的story_id传递给.load函数，或者如何确保将结果帖子加载到正确的posts_bucket_for中。

这是我的_story.html.erb文件：

<%= div_for(story) do %>
   <%= div_for(story, "heading_for") do %>
        <span class=story_title>
            <%= story.title.titleize %>
        </span>
        <span class=story_post_amount>
            # of posts: <%= story.posts.length %>
        </span>
   <% end %>
<%= div_for(story, "posts_bucket_for") do %>
<% end %>

这是我的PostController #index action

  def index
    @story = Story.find(params[:story_id])
    @posts = @story.posts
    respond_with(@posts, :api_template => :public, :root => :posts)
  end

任何帮助都将非常感谢!!!

Answer 1

有许多方法可以实现您想要实现的目标，我敢打赌，这里的许多贡献者将根据他们的编码经验为您提供解决方案。这是我的：

首先，您必须确定在将实际故事“上传”到您想要的位置后是否需要保持故事标题可见。

我不知道ruby或ruby-on-rails，但对“博客”有很好的追踪。

假设您在数据库中列出了可用的故事

<div id='story1' onClick='showStory(1); ' >Story 1</div>
<div id='story2' onClick='showStory(2); ' >Story 2</div>
<div id='story3' onClick='showStory(3); ' >Story 3</div>
<div id='story4' onClick='showStory(n); ' >Story n</div>

function showStory(storyNumber) {
    $.get('url-of-the-story-storyNumber', function (data) {
        $('#story'+storyNumber).html(data);
    });
}
or
function showStory(storyNumber) {
     $('#story'+storyNumber).load('url-of-the-story-storyNumber');
}

如果你打算不覆盖故事标题行，你只需将另一个div放入故事情节：

<div onClick='showStory(1); ' >
 Story 1
 <div id='story1' ></div>
</div>

<div onClick='showStory(2); ' >
 Story 2
 <div id='story2' ></div>
</div>

<div onClick='showStory(3); ' >
 Story 3
 <div id='story3' ></div>
</div>

<div onClick='showStory(n); ' >
 Story n
 <div id='storyn' ></div>
</div>

您越容易使ID“易于管理”，就越容易使用它们。

祝你好运！

Answer 2

这是实现解决方案的一种方法（这适用于Rails 3）。

根据div_for的Rails文档，div_for(story, :class => "story")将生成如下HTML：

<div id="story_123" class="story"> Your content </div>

所以，使用jQuery，你可以运行类似的东西：

// Attach click event handlers to your story divs
$(function() {
  $("div.story").click(function() {
    // Get the HTML ID of the story div
    html_id = $(this).attr('id');
    // Extract the database id
    story_id = html_id.split("_")[1];
    // Call your handy function to load story posts
    loadStoryPosts(story_id);
  });
});

对于您的存储桶，我不会使用其他div_for(story)。这将导致您在页面上有两个divs具有相同的ID。相反，我会做这样的事情：

<%= div_for(story, :class => "story") do %>
    <p>The story</p>
    <div class="posts" />
<% end %>

然后，在jQuery中

// Make an AJAX request to your Rails server
function loadStoryPosts(story_id) {
  // This is a jQuery AJAX GET request to your stories/:id/posts route
  $.get("stories/" + story_id + "/posts", function(data) {
    html_id = "story_" + story_id;        
    // Insert the result of the request into the appropriate posts bucket
    $("#"+html_id+" .posts").html(data);
  });
}

剩下的任务是让控制器动作处理AJAX请求并返回要插入页面的帖子。

class StoriesController < ApplicationController
  def posts
    story = Story.find params[:id]
    # Render the story's posts inside a partial (without any layout)
    render :partial => "stories/posts", :locals => { :posts => story.posts }, :layout => false
  end
end

您还需要创建一个部分来呈现帖子。在我的示例中，这将是views/stories/_posts.html.erb。

如果你以前没有处理过AJAX + Rails，这是很多新的学习材料，所以这里有一些有用的教程：here和here。

如何将div_id传递给jquery加载函数

2 个答案: