Question

谢谢你的时间！

我手上有一些报告数据，我想在网上提供这些数据。 HTML的视图将分为左侧部分和右侧部分两部分。左侧部分的树视图由报告名称组成。在右边部分显示了报告的内容。

我想要实现的是当我点击左侧部分的报告名称时，它会调用Action中的Controller，并将报告名称作为参数传递。 Action将从数据库中获取数据并表示右侧部分中的数据。现在我被困在如何实现这种观点上。

我在互联网上搜索了很多内容，发现Frameset，Partials或Ajax可能具备此功能。因为我以前从未开发过Web应用程序，也是Rails的新用户。那么有人可以给我一些建议或建议吗？

我已经知道的事情：

我使用Frameset来完成这样的视图。但我发现它需要很多.html个文件，所有这些.html文件都是静态的。许多人根本没有建议。
然后我用Google搜索Partials。但似乎Partials没有称之为行动。它直接将_partials.html.erb加载到主视图中。此外，我如何控制布局？使用CSS？
我从未使用Ajax。

Answer 1

如果您希望在一个报告与另一个报告之间进行流畅，无缝的转换，则应同时使用AJAX和Partials。

它的工作方式如下：

在html中创建一个左列，其中包含一些链接
在部分
将链接分配给jQuery侦听器以调用AJAX。

我会在这里放一些代码来说明它是如何工作的：

控制器：

def index
    reports = Report.all
    if params[:report_id]
        reports = Report.find(params[:report_id]
    end
    respond_to do |format|
        format.html
        format.js { render :template => "update_reports" }
    end
end

update_reports.js.erb（与报告视图位于同一文件夹中）：

$('#report_viewer').html('<%= escape_javascript render :partial => "report_detail" %>');

在您看来：

<div style=float:left>
    <ul>
        <li><%= link_to "Some report", "#", :class => "ajax" %></li>
    </ul>
</div>
<div style=float:right id="report_viewer">
    <%= render :partial => "report_detail" %>
</div>

<script type='text/javascript'>
    $(document).ready(function() {
        $(".ajax").click(function(e) {
            $(this).ajax("your route to the action");
        }
    });
</script>

我认为基本上就是这个，现在让我解释一下：

我不记得你是否必须这样做，但在我的情况下，我创建了一个新的自定义路由来强制调用该动作为json调用，而不是html调用。您可以通过向路线

:format => "js"

您必须将所有部分命名为“_yourname.html.erb”。如果没有前导下划线，Rails将无法识别部分内容。
在控制器中，“format.js”之后的所有内容都是可选的，您不需要指定模板名称，如果不这样，Rails将查找文件index.js.erb。
update_reports.js.erb文件基本上是一个回调javascript，用于更新当前页面。它找到partial所在的div，并使用新报告更新它以呈现新的部分。
在视图中，如果您正在使用jQuery.click侦听器，则根本不需要更改报表的链接，但如果是链接，则必须将href设置为“＃” ，否则浏览器只会尝试重定向到该位置。
有几种方法可以将你的链接挂钩到ajax函数，我只是选择了我更喜欢的那个，但是你也可以有一个命名函数并在html标签中调用它“onClick ='yourFunction（）'”
你需要jQuery这样调用ajax。如果你正在唱Rails 3.0或更低版本，你应该用jQuery替换默认的Prototype，因为它更好（恕我直言），但我认为原型也有一些ajax功能。
这可能看起来很复杂，但是一旦你明白了它就会变得简单，就像写任何其他动作一样。
在js回调文件中，您还可以添加动画以平滑过渡，就像淡入淡出一样。有关这方面的更多信息，请查找jQuery淡入淡出函数。

Answer 2

这是一个非常开放的问题，所以不要逐字逐句地回答这个问题，而只是作为指导。

应用/视图/布局/ reports.html.erb

<!DOCTYPE html> <html itemscope itemtype="http://schema.org/"> <head> # omitted </head> <body> <div id="body-container"> <div id="left-column"> <ul id="reports-list"> <% for report in @reports %> <li><%= link_to report.name, report %></li> <% end %> </ul> </div> <div id="right-column"> <%= yield %> </div> </div> </body> </html>

应用/控制器/ reports_controller.rb

class ReportsController < ApplicationController before_filter { @reports = Report.all } def index end def show @report = Report.find(params[:id]) end def edit @report = Report.find(params[:id]) end def new @report = Report.new end def update # omitted end def create # omitted end def destroy @report = Report.find(params[:id]) end end

<强>的routes.rb

YourApp::Application.routes.draw do resources :reports root to: "reports#index" end

这样可以达到使用后只需使用rails的效果，当然添加ajax可以增加更好的用户体验。

导轨导航和部分刷新

2 个答案: