参考链接:http://guides.ruby-china.org/layouts_and_rendering.html#%E9%9D%99%E6%80%81%E8%B5%84%E6%BA%90%E6%A0%87%E7%AD%BE%E5%B8%AE%E5%8A%A9%E6%96%B9%E6%B3%95

讲rails布局就得先说说yield关键字。

  1. 在rails布局中,yield标明一个区域,渲染的视图会插入这里。最简单的情况是只有一个 yield,此时渲染的整个视图都会插入这个区域:

    <html>
    <head>
    </head>
    <body>
    <%= yield %>
    </body>
    </html>

    布局中也可以标明多个区域,这个就需要使用具名yield,然后使用content_for方法。对于未命名的yield,视图的主体就会插入到未命名的yield区域。

    #主布局  application.html.erb
    <html>
    <head>
    <%= yield :head %>
    </head>
    <body>
    <%= yield %>
    </body>
    </html> #子页面
    <% content_for :head do %> #插入到主布局的 <%= yield :head %>位置
    <title>A simple page</title>
    <% end %> <p>Hello, Rails!</p>#插入到主布局的 <%= yield %>位置 #最后生成的html
    <html>
    <head>
    <title>A simple page</title>
    </head>
    <body>
    <p>Hello, Rails!</p>
    </body>
    </html>

    如果布局不同的区域需要不同的内容,例如侧边栏和底部,就可以使用 content_for 方法。content_for 方法还可用来在通用布局中引入特定页面使用的 JavaScript 文件或 CSS 文件。

    以上都是对于在application.html.erb的全局布局来说的。

  2. 具名局部视图
    在视图中渲染局部视图可以使用 render 方法:
    <%= render "menu" %>

    渲染这个视图时,会渲染名为 _menu.html.erb 的文件。注意文件名开头的下划线:局部视图的文件名开头有个下划线,用于和普通视图区分开,不过引用时无需加入下划线。即便从其他文件夹中引入局部视图,规则也是一样:

    <%= render "shared/menu" %>
    #这行代码会引入 app/views/shared/_menu.html.erb 这个局部视图。

    局部视图的一种用法是作为“子程序”(subroutine),把细节提取出来,以便更好地理解整个视图的作用。例如,有如下的视图:

    <%= render "shared/ad_banner" %>
    
    <h1>Products</h1>
    
    <p>Here are a few of our fine products:</p>
    ... <%= render "shared/footer" %>

    这里,局部视图 _ad_banner.html.erb 和 _footer.html.erb 可以包含程序多个页面共用的内容。在编写某个页面的视图时,无需关心这些局部视图中的详细内容。

  3. 局部布局
    和视图可以使用布局一样,局部视图也可使用自己的布局文件。例如,可以这样调用局部视图:
    <%= render partial: "link_area", layout: "graybar" %>

    这行代码会使用 _graybar.html.erb 布局渲染局部视图 _link_area.html.erb。注意,局部布局的名字也以下划线开头,和局部视图保存在同个文件夹中(不在 layouts 文件夹中)。

    还要注意,指定其他选项时,例如 :layout,必须明确地使用 :partial 选项。

    但是我在实际使用中,也是把局部布局保存在layouts文件夹中,使用的时候

    <%= render partial: "link_area", layout: "layouts/graybar" %>
    #为了保证不出错,可以这么写
    <%= render partial: "link_area.html.erb", layout: "layouts/graybar.html.erb" %>

    在使用render :partical时,可以向局部视图传递本地变量

    #传递本地变量
    <h1>New zone</h1>
    <%= render partial: "form", locals: {zone: @zone} %> #使用
    <%= form_for(zone) do |f| %>
    <p>
    <b>Zone name</b><br>
    <%= f.text_field :name %>
    </p>
    <p>
    <%= f.submit %>
    </p>
    <% end %>
    #还有些其他方式传递,见前面的参考链接

ruby on rails全局布局,局部视图,局部布局的更多相关文章

  1. HTML CSS + DIV实现局部布局

    HTML CSS + DIV实现局部布局 HTML CSS + DIV实现局部布局 1.本章教大家掌握2种布局方式: 1)顶部导航菜单布局,效果图: 2)购物版块布局,效果图: 2.技术目标: 使用d ...

  2. 【转载】CSS + DIV 实现局部布局

    HTML CSS + DIV实现局部布局 1.本章教大家掌握2种布局方式: 1)顶部导航菜单布局,效果图: 2)购物版块布局,效果图: 2.技术目标:使用div + ul-li实现导航菜单布局    ...

  3. 自适应XAML布局经验总结 (三) 局部布局设计模式2

    本系列对实际项目中的XAML布局场景进行总结,给出了较优化的自适应布局解决方案,希望对大家有所帮助. 下面继续介绍局部布局设计模式. 5. 工具箱模式 绘图,三维模型操作等需要工具的情况,可以使用带分 ...

  4. 自适应XAML布局经验总结 (二) 局部布局设计模式1

    本系列对实际项目中的XAML布局场景进行总结,给出了较优化的自适应布局解决方案,希望对大家有所帮助. 下面开始介绍局部布局设计模式. 1. 工具栏模式 适用于工具栏,标题等的布局. 此块布局区域外层使 ...

  5. Ruby on Rails Tutorial读书笔记-1

    只是怕忘了命令,全部撸一次,记个大概.. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 安装Ruby之前,先要安装RVM: curl -L https://get.rvm.io | bas ...

  6. Ruby on Rails框架开发学习

    学习地址:http://www.ixueyun.com/lessons/detail-lessonId-685.html 一.课程概述 软件开发在经历了面向过程编程的阶段,现在正大行其道的是敏捷开发, ...

  7. [ruby on rails] 跟我学之(7)创建数据

    通过form来创建数据,本章节将会涉及内容:创建form,用户重导向,渲染views 和 flash消息. 1. views初步 编辑 app/views/posts/index.html.erb这个 ...

  8. Android:控件布局(表格布局)TableLayout

    TableLayout继承LinearLayout 实例:用表格布局实现计算机布局>>>>>>>>>>>> 有多少个TableR ...

  9. 《Ruby on Rails教程》学习笔记

    本文是我在阅读 Ruby on Rails 教程的简体中文版时所做的摘录,以及学习时寻找的补充知识.补充知识主要来自于 Ruby on Rails 實戰聖經. Asset Pipeline 在最新版 ...

随机推荐

  1. C++11六大函数(构造函数,移动构造函数,移动赋值操作符,复制构造函数,赋值操作符,析构函数)

    在C++中,有三大函数复制控制(复制构造函数,赋值操作符,析构函数),而在C++11中,加入了移动构造函数,移动赋值操作符.我就斗胆将他们命名为六大函数好了. 一.构造函数 c++primer中说过: ...

  2. ssm框架下实现文件上传

      1.由于ssm框架是使用Maven进行管理的,文件上传所需要的jar包利用pom.xml进行添加,如下所示: <properties> <commons-fileupload.v ...

  3. The 17th Zhejiang University Programming Contest Sponsored by TuSimple J

    Knuth-Morris-Pratt Algorithm Time Limit: 1 Second      Memory Limit: 65536 KB In computer science, t ...

  4. Counting The Important Pairs CodeChef - TAPAIR

    https://vjudge.net/problem/CodeChef-TAPAIR 合法的删除方法: 第一种:桥边与其余任意边(1)桥*(桥-1)/2(两条桥边)(2)桥*(m-桥)(桥边+其他边) ...

  5. Mike and gcd problem CodeForces - 798C

    题目 (智商题 or 糟心的贪心) 题意: 有一个数列a1,a2,...,an,每次操作可以将相邻的两个数x,y变为x-y,x+y,求最少的操作数使得gcd(a1,a2,...,an)>1.gc ...

  6. HAL之定时器

    一首先得对定时器的时钟与系统时钟的关系搞清楚,基本定时器的时钟来自APB1最大36MHZ.(定时器倍频值为1) 二 在STM32CubeMX中打开外设功能,时钟源选择内部:然后在配置定时器3中的参数设 ...

  7. AJPFX总结I/O流操作(一)

    在软件开发中,数据流和数据库操作占据了一个很重要的位置,所以,熟悉操作数据流和数据库,对于每一个开发者来说都是很重要的,今天就来总结一下I/O,数据库操作 一:从数据流开始 首先先有一个结构图看一下整 ...

  8. JVM线程与Linux内核线程的映射[转]

    Linux从内核2.6开始使用NPTL (Native POSIX Thread Library)支持,但这时线程本质上还轻量级进程. Java里的线程是由JVM来管理的,它如何对应到操作系统的线程是 ...

  9. mysql单向自动同步

    mysql自动同步 以下教程均使用mysql自带的自动同步功能 全库单向自动同步 本例把192.168.3.45上名称为ewater_main的数据库自动同步到192.168.3.68的ewater_ ...

  10. 在CentOS上把Git从1.7.1升级到1.7.12.4

    在CentOS上把Git从1.7.1升级到1.7.12.4 摘要:本文记录了在CentOS 6.3上,把Git从1.7.1升级到1.7.12.4的过程. 1. 概述 在我做的一个项目中,最近我对生产服 ...