【问题标题】:How to render horizontal page layout with multiple frames如何使用多个框架呈现水平页面布局
【发布时间】:2013-03-12 11:15:07
【问题描述】:

我们有一个简单的应用程序,它具有水平布局(左侧面板和右侧的内容),带有页眉和页脚。因此,如果您单击左侧的某个对象,则会在右侧呈现视图,并在页眉和页脚链接中使用导航面板。对于左侧的任何操作,布局实际上在同一页面上呈现内容,左侧的内容将根据标题中选择的部分而有所不同。在这些情况下,我们应该如何设计路线,这与每个动作都呈现在不同页面上的基本导航不同。

我的路线看起来像这样..

  resources :foos do
    resources :foo_bars do
    end
  end

我需要在左侧面板上显示所有 foo,如果用户选择 foo,它需要在右侧面板的表格中显示 foofoo_bars 的属性。视图将如何寻找我以及浏览器中的 URL 如何寻找我?我们将在顶部有几个选项卡,并在此基础上显示foos 或类似的顶级对象

【问题讨论】:

    标签: ruby-on-rails routes


    【解决方案1】:

    路线保持不变。您需要 ajaxify 调用。

    【讨论】:

      【解决方案2】:

      如果您的问题是:

      我们应该如何设计路线

      如果您想利用嵌套资源,您拥有它的方式就很好,而且在您的情况下,这似乎是合乎逻辑的。 http://guides.rubyonrails.org/routing.html#nested-resources

      目前,您的网址如下:/foos/:foos_id/foo_bars/some_action

      让我重命名这些,让事情更有意义。假设 foos 是类别,而 foo_bars 是操作。

      就个人而言,我会覆盖类别模型文件中的 to_param。

      to_param
        #return a more readable attribute here
        name
      end
      

      这样,您的 URL 将与页面左侧所有类别的名称更紧密地联系在一起。

      所以现在,如果您在类别表中有一条名为 animal 的记录,您的 URL 将如下所示:/categories/animal/actions/some_action

      这对我来说似乎很合乎逻辑。如果您使用 to_param,请确保在您的控制器中通过适当的属性获取记录。

      我也会将相同的主体应用于嵌套资源,然后您的整个 URL 将准确地表示在页面上选择的选项卡。如果您有一个名为“正在运行”的操作记录,并且您的设置正确,那么您的网址可能类似于:categories/animal/actions/running

      您可以在您的路线文件中使用所有选项,然后在终端中使用rake routes 来查看发生了什么变化以及您的网址会是什么样子,甚至在您触摸浏览器之前。

      这里有一些额外的资源供您参考。

      http://apidock.com/rails/ActiveRecord/Integration/to_param http://guides.rubyonrails.org/action_controller_overview.html

      希望这会有所帮助。

      【讨论】:

        【解决方案3】:

        您的问题没有很好的答案 - 这完全取决于您的应用程序的布局。此外,这里有关于 to_param 和使用 AJAX 的有效答案,它们添加了重要的细节。但是,为了让您领先一步。

        对于您的视图/foo,将您的 index.html.erb 重写为:

        <%= render partial: "show_foos", locals: { foos: @foos, selected_foo: nil }%>
        

        你的 show.html.erb 为:

        <%= render partial: "show_foos", locals: { foos: @foos, selected_foo: @foo }%>
        

        在你的 foos_controller.rb 的 show 方法中你需要同时获得@foos 和@foo,例如:

        @foos = Foo.all
        @foo = Foo.find(params[:id])
        

        现在,进入有趣的部分。返回views/foos 目录。创建一个名为“_show_foos.erb”的部分(我们从#index 和#show 调用的部分)。执行以下操作:

        <table>
          <tr>
            <td>
              <%= render partial: "show_foos_list", locals: { foos: foos, selected_foo: selected_foo }%>
            </td>
            <td>
              <%= render partial: "show_foo_props", locals: { selected_foo: selected_foo }%>
            </td>
          </tr>
        </table>
        

        请注意,这是一个非常粗暴和丑陋的示例,它创建了一个包含两列的表格:一列用于左侧“面板”中的 foo 列表,另一列用于在右侧“面板”中显示所选 foo 的结果。在现实生活中使用 div 和样式。此外,考虑将布局推送到它所属的位置 - 到适当的布局文件 - 并在那里使用命名收益。但是,正如我所说,一个先机 - 简单的表格。

        现在,只需定义这里提到的两个部分。首先,“_show_foos_list.erb”列出了左侧的 foo。假设每个 foo 都有一个“title”属性,例如:

        <% foos.each do |foo| %>
          <%= link_to_unless selected_foo && (foo.id == selected_foo.id), foo.title, foo %><br />
        <% end %>
        

        第二,右边的 foo & foo_bars - "_show_foo_props.erb":

        <% if selected_foo %>
          # Here display the Foo attributes
          <h2> Foo: <%= selected_foo.title %> </h2>
          <% selected_foo.foo_bars.each do |foo_bar| %>
            # Here display each FooBar that belongs to Foo
            <h3>FooBar <%= foo_bar.title %></h3>
            <%= foo_bar.description %>
          <% end %>
        <% end %>
        

        再一次,非常粗略的例子。将 'title'、'description' 替换为正确的参数集,使用部分显示 FooBars。使用 CSS 进行样式设置。等等,等等……根据你的需要进行重构。

        谈论路线。当您访问“www.yourapp.com/foos”网址时,您得到的是左侧所有 foo 的列表,右侧没有任何内容。按下左栏中的任何 foo 后,您将转到“www.yourapp.com/foos/:id”,其中 :id 是所选 foo 的 ID(并从此处的其他答案或更高级的技术中考虑 to_param使这部分有意义)并在左侧获取 foos 列表,在右侧获取所选 foo 和所有属于它的 foo_bars 的属性。

        希望这有助于根据此处提出的粗略想法开始布局您自己的实现。

        【讨论】:

          【解决方案4】:

          如果我正确理解您的问题,那么说需要 Ajax 的答案是不正确的。我有一个古老的 Perl 应用程序(写于 1999 年)可以做到这一点。我目前在 Rails 中重新实现,并且工作正常。框架使得在菜单保持固定时允许数据滚动变得特别容易。

          您确实需要使用在 HTML5 中已弃用的 HTML4 框架,可以使用 IFRAME 作为数据渲染框架并符合 HTML5,但结果不如 HTML4 中的 FRAME 解决方案可用,至少在某些情况下浏览器。

          正如其他人所说,您的路线很好。

          诀窍是使用form 中的target 字段将提交响应定向到渲染帧。我的“命令”框架的haml代码是

          = form_tag admin_menu_path, :method => :put, :target => 'data_frame' do
             ...
          

          其余的只是一个正常的形式。这种形式在(我的情况)左侧框架中保持不变,而在右侧 data_frame 中的响应相互替换。

          匹配的框架 HTML 是:

          <frameset cols="360,*">
            <frame name="menu_frame" src="...">
            <frame name="data_frame" src="admin.htm">
          </frameset>
          

          您必须使用外部框架集来获取页眉和页脚,但这应该很简单。

          我已经准备好接受 cmets 说框架远非最佳实践。但是对于这个特定的应用程序,它们是完美的:简单、易于理解并且非常独立于浏览器。例如。我 1999 年 Perl 生成的代码在 IE 2.0 和 Netscape(Firefox 的祖先,朋友们)上运行良好。在我能找到的每一个现代浏览器上,它仍然是完美的。希望 Ajax 也能这么说……

          如果我误解了您的问题,我很乐意删除此回复。

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2013-11-26
            • 1970-01-01
            相关资源
            最近更新 更多