单击链接时如何将部分加载到视图中？答案

【问题标题】：How to load partial into view when a link is clicked?单击链接时如何将部分加载到视图中？
【发布时间】：2013-07-08 22:00:35
【问题描述】：

我的 Rails 应用程序中有一个用户“提交”列表，当单击用户提交时，我希望将完整提交加载到视图中，而无需转到新页面。

这是提交列表的代码：

<div id="submission-list-container">
    <% current_user.submissions.each do |i| %>
        <a href='#'>
            <div id="post-container">
                <%= i.title %> 
            </div>
        </a>
    <% end %>
</div>

我创建的部分，<%= render "show", :submission => i %>,，工作正常，但我希望在单击上面的链接时将完整的提交加载到视图 (index.html.erb) 中。有没有这样做的好方法？我应该在 JavaScript 中做一些其他的事情，比如 AJAX 调用吗？我喜欢这些部分，因为它感觉更干净和有条理的单独代码。

目前我的部分很简单：

<%= submission.title %>
<%= dat_markdown(submission.content) %>

【问题讨论】：

我认为您正在寻找 AJAX 调用，是的。
该死...好吧，我猜。

标签： javascript ruby-on-rails ruby ajax partial-views

【解决方案1】：

您可以使用 Dojo Toolkit 中的 TitlePane 来做到这一点，并且可能有一个与 jQueryUI 类似的小部件。

我只能说 Dojo Toolkit 的版本

你会做这样的事情：

<div data-dojo-type="dijit/TitlePane" data-dojo-props="href: '/blah', title: '<%= submission.title %>', open: false">

您可以将它包含在应用程序布局中，以便从 CDN 加载 lite 使用 dojo：

<script data-dojo-config="async: true, parseOnLoad: true"></script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js"></script>

TitlePane 已连接，以便在展开时自动加载提供给 href 参数的内容。

虽然这不是直接的 rails 解决方案，但它可以用作替代方案。

对于 Rails 解决方案，您可以简单地使用 AJAX 调用来呈现部分的控制器。您甚至可以使用

将其连接起来

def blah
  @submission = Submission.find(...)
  respond_to do |format|
    format.html # default render
    format.js # js behavior
  end
end

然后是 blah.html.erb

<%= render partial: 'submission/submission', object: @submission %>

部分

<div id='submission-<%= submission.id %>'>
  <div id='submission-<%= submission.id %>-title'><%= link_to(submission.title, 'blah/blah', remote: true) %></div>
  <div id='submission-<%= submission.id %>-content'></div>
</div>

还有一个 blah.js.erb

$.get('/submission/content', function(data) { $('#submission-<%= @submission.id %>-content').html(data) } );

并通过路由进入 submits_controller

def content
  @submission = Submission.find(...)
  render text: @submission.content
end

这可能不是一个确切的解决方案，但希望它能让您走上正确的道路。

【讨论】：