0

谢谢你的时间！

我手头有一些报告数据，我想在网络上展示这些数据。HTML的视图将分为两部分，左侧部分和右侧部分。左侧有一个树视图，其中包含报告名称。在右侧部分显示了报告的内容。

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

我在互联网上搜索了很多，发现Frameset，Partials或者Ajax可能能够做到这一点。因为我以前从未开发过 Web 应用程序，而且对 Rails 也是新手。那么有人可以给我一些建议或建议吗？

我已经知道的事情：

  1. 我曾经Frameset完成过这样的视图。但我发现它需要很多.html文件，而且所有这些.html文件都是静态的。许多人根本不建议这样做。

  2. 然后我用谷歌搜索了Partials。但它似乎Partials不调用Action。它直接加载_partials.html.erb到主视图。此外，我如何控制布局？使用CSS?

  3. 我从来没用过Ajax。

4

2 回答 2

4

如果您想在一个报表和另一个报表之间进行流畅、无缝的转换，您应该同时使用 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，执行以更新当前页面。它找到部分所在的 div，并更新它以使用新报告呈现新的部分。
  • 在视图中，如果您使用的是jQuery.click监听器，则更改报表的链接根本不需要是链接，但如果是链接，则必须将href作为“#”，否则浏览器只会尝试重定向到该位置。
  • 有几种方法可以将您的链接与 ajax 函数挂钩，我只是选择了我更喜欢的一种，但您也可以有一个命名函数并在 html 标记“onClick='yourFunction()'”中调用它。
  • 你需要 jQuery 来像这样调用 ajax。如果你使用的是 Rails 3.0 或更低版本，你应该用 jQuery 替换默认的 Prototype，因为它更好（恕我直言），但我认为原型也有一些 ajax 特性。
  • 它可能看起来很复杂，但是一旦你明白了它就会变得像编写任何其他动作一样简单。
  • 在 js 回调文件中，您还可以添加动画以平滑过渡，如淡入淡出。查找 jQuery 淡入淡出功能以获取更多信息。
于 2012-10-24T13:19:41.740 回答
3

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

应用程序/视图/布局/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

路线.rb

YourApp::Application.routes.draw do
  resources :reports

  root to: "reports#index"
end

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

于 2012-10-24T10:43:08.960 回答