Question

我是RoR的新手，我正在使用Chartkick和HighCharts从我的sqlite数据库中显示一些图表。图表是每日和每周，所以我有两个.erb-s，每个都有查询，我希望index.html.erb在我的点击按钮之间动态更改。

这是来自daily_graph.erb的代码：

<div><%= line_graph Product.where(date_time: "2014-03-03 00:00:00".."2014-03-03 23:45:00").group(:date_time).sum(:value) %></div>

这是来自weekly_graph.erb的代码：

<div><%= line_graph Product.where(date_time: "2014-03-03 00:00:00".."2014-03-09 23:45:00").group(:date_time).sum(:value) %></div>

如何在index.erb中使用这些视图进行操作，因此当我单击WEEK按钮时，daily_graph将消失，显示weekly_graph，反之亦然。

Answer 1

两件事：

1）保持观点愚蠢。在控制器内部执行SQL查询，并将其设置为视图访问的变量。所以，它将是：

# Inside your controller

def index
  @daily_products = Product.where(date_time: "2014-03-03 00:00:00".."2014-03-03 23:45:00").group(:date_time).sum(:value)
  @weekly_products = Product.where(date_time: "2014-03-03 00:00:00".."2014-03-09 23:45:00").group(:date_time).sum(:value)
end

然后你的观点就是：

<div class="graph"><%= line_graph @weekly_products %></div>
<div class="graph hidden"><%= line_graph @daily_products %></div>

2）.erb文件用于服务器端模板，因此需要在客户端进行来回切换。您可以在页面上同时使用两个图形，并使用事件处理程序在按下按钮时禁用/显示相应的图形。

在索引页面上，假设您有<button id="flipGraphs">Change</button>

使用jQuery，您可以：

$(function(){ // If you are not familiar with jQuery, this will run when the page is loaded and ready
  $('#flipGraphs').click(function(){
    $('.graph').toggle(); // toggles all of the divs as hidden / shown
  });
});

另外，将其添加到application.css文件中：

.hidden{
  display: none;
}

Answer 2

您希望将这些ERB views转换为partials ...然后您可以创建一个新的控制器操作，呈现您感兴趣的特定部分，并且您可以使用jQuery ajax获取该控制器操作电话...请参阅：Rails: Rendering Partials through Ajax了解更多示例

通常情况下，你不会在view ...设置控制器实例变量中执行模型查找器方法，而是引用它们......这将直接导致整体更干燥的结果。

如何在RoR中单击按钮更改<div>中呈现的.erb？</div>

2 个答案: