导轨导航和局部刷新

感谢您的时间！导轨导航和局部刷新

我手上拿到了一些报告数据，我想把这些数据呈现在网上。 HTML的视图将被分成两部分，左部分和右部分。左侧有一个树形视图，由报告名称组成。在右边部分介绍报告的内容。

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

我在互联网上搜索了很多，发现Frameset，Partials或Ajax可能有此能力。因为我从来没有开发过Web应用程序，也是Rails的新手。那么任何人都可以给我一些建议或建议吗？

事情我已经知道：

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

来源

2012-10-24 mCY

这是一个非常广泛的问题。我想你应该检查出 http://www.guides.rubyonrails.org – wpp

这是一个相当悬而未决的问题，所以不要逐字回答这个问题，而只是作为指导。

应用/视图/布局/ 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可以增加更好的用户体验。

来源

2012-10-24 10:43:08 veritas1

谢谢你的推荐。我会尝试的！ – mCY

如果您想在一个报告和另一个报告之间进行流畅的转换，则应该同时使用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-24 13:19:41

感谢您的回复！ – mCY

导轨导航和局部刷新

回答

相关问题