Ruby on Rails
ビュー
サーチ…
部分
部分テンプレート(部分)は、レンダリングプロセスをより管理しやすい塊に分割する方法です。パーシャルアールを使用すると、テンプレートからコードを抽出してファイルを分割し、テンプレート全体で再利用することができます。
部分を作成するには 、 _form.html.erb
というアンダースコアで始まる新しいファイルを作成します。
ビューの一部として部分をレンダリングするには、ビュー内のrenderメソッドを使用します。 <%= render "form" %>
- レンダリング時にアンダースコアは省略されていることに注意してください
- パーツは、別のフォルダにある場合はそのパスを使用してレンダリングする必要があります
変数を部分変数にローカル変数として渡すには 、次の表記法を使用します。
<%= render :partial => 'form', locals: { post: @post } %>
部分コードは、まったく同じコード( DRY哲学 )を再利用する必要がある場合にも便利です。
例えば、再利用するために<head>
、コードを部分的に名前の作成_html_header.html.erb
、あなたの入力し<head>
コードを再利用するために、とが必要とするたび部分をレンダリング: <%= render 'html_header' %>
。
オブジェクトパーシャル
to_partial_path
応答するオブジェクトは、 <%= render @post %>
こともできます。デフォルトでは、ActiveRecordモデルの場合はposts/post
ようになりますので、実際に@post
レンダリング@post
と、ファイルのviews/posts/_post.html.erb
がレンダリングされます。
ローカルの名前付きpost
が自動的に割り当てられます。結局、 <%= render @post %>
は<%= render 'posts/post', post: @post %>
短い手です。
<%= render @posts %>
ように、 to_partial_path
応答するオブジェクトのコレクションを提供することもでき<%= render @posts %>
。各アイテムは連続してレンダリングされます。
グローバルパーシャル
正確なパスを参照せずにどこでも使用できるグローバルパーシャルを作成するには、パーシャルをviews/application
パスに配置するviews/application
ます。前の例は、この機能を説明するために以下に変更されています。
たとえば、これはグローバルな部分的なapp/views/application/_html_header.html.erb:
この部分的なグローバルな部分をレンダリングするには、 <%= render 'html_header' %>
AssetTagHelper
ほとんどの場合、ヘルパーを組み込みたい場合は、レールに自動的に資産(css / js / images)を自動的かつ適切にリンクさせるためです。 ( 公式文書 )
イメージヘルパー
image_path
これにより、 app/assets/images
画像アセットへのパスが返されます。
image_path("edit.png") # => /assets/edit.png
image_url
これにより、 app/assets/images
画像アセットへの完全なURLが返されます。
image_url("edit.png") # => http://www.example.com/assets/edit.png
image_tag
<img src="" />
タグをソースセットに含めるには、このヘルパーを使用します。
image_tag("icon.png") # => <img src="/assets/icon.png" alt="Icon" />
JavaScriptヘルパー
javascript_include_tag
ビューにJavaScriptファイルを含める場合。
javascript_include_tag "application" # => <script src="/assets/application.js"></script>
javascript_path
JavaScriptファイルのパスが返されます。
javascript_path "application" # => /assets/application.js
javascript_url
これはJavaScriptファイルの完全なURLを返します。
javascript_url "application" # => http://www.example.com/assets/application.js
スタイルシートヘルパー
stylesheet_link_tag
ビューにCSSファイルを含める場合。
stylesheet_link_tag "application" # => <link href="/assets/application.css" media="screen" rel="stylesheet" />
stylesheet_path
これにより、スタイルシートアセットのパスが返されます。
stylesheet_path "application" # => /assets/application.css
stylesheet_url
あなたのスタイルシートアセットの完全なURLを返します。
stylesheet_url "application" # => http://www.example.com/assets/application.css
使用例
新しいレールアプリを作成するときは、自動的にapp/views/layouts/application.html.erb
2つのヘルパーがありapp/views/layouts/application.html.erb
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
これは、
// CSS
<link rel="stylesheet" media="all" href="/assets/application.self-e19d4b856cacba4f6fb0e5aa82a1ba9aa4ad616f0213a1259650b281d9cf6b20.css?body=1" data-turbolinks-track="reload" />
// JavaScript
<script src="/assets/application.self-619d9bf310b8eb258c67de7af745cafbf2a98f6d4c7bb6db8e1b00aed89eb0b1.js?body=1" data-turbolinks-track="reload"></script>
構造
RailsはM V Cパターンに従ってViews
されます。 Views
は、あなたの "テンプレート"があなたのアクションのためにある場所です。
たとえば、コントローラarticles_controller.rb
があるとします。このコントローラの場合、 app/views/articles
というビューのフォルダがあります。
app
|-- controllers
| '-- articles_controller.rb
|
'-- views
'-- articles
| |- index.html.erb
| |- edit.html.erb
| |- show.html.erb
| |- new.html.erb
| '- _partial_view.html.erb
|
'-- [...]
この構造により、各コントローラ用のフォルダを持つことができます。コントローラでアクションを呼び出すと、適切なビューが自動的にレンダリングされます。
// articles_controller.rb
class ArticlesController < ActionController::Base
def show
end
end
// show.html.erb
<h1>My show view</h1>
ビューでのHTMLコードの置き換え
ランタイム中にページに印刷されるhtmlコンテンツを決定したいと思っていた場合、そのための非常に良い解決策がレールにあります。 content_forと呼ばれるものがあります。これによって、ブロックをレールビューに渡すことができます。以下の例を確認してください。
コンテンツを宣言する
<div>
<%= yield :header %>
</div>
<% content_for :header do %>
<ul>
<li>Line Item 1</li>
<li>Line Item 2</li>
</ul>
<% end %>
HAML - あなたの意見で使用する別の方法
HAML(HTML抽象マークアップ言語)は、ビューのHTMLを記述してデザインするための美しくエレガントな方法です。タグを開いたり閉じたりする代わりに、HAMLはページの構造にインデントを使います。基本的に、別の要素内に配置する必要がある場合は、タブストップを1つ使用してインデントします。 HAMLではタブと空白が重要なので、常に同じ量のタブを使用するようにしてください。
例:
#myview.html.erb
<h1><%= @the_title %></h1>
<p>This is my form</p>
<%= render "form" %>
そして、ハムで:
#myview.html.haml
%h1= @the_title
%p
This is my form
= render 'form'
レイアウトの構造は、HTMLとERBを使用するよりはるかに明確です。
インストール
単に宝石をインストールする
gem install haml
gemfileに宝石を追加する
gem "haml"
HTML / ERBの代わりにHAMLを使用する場合は、ビューのファイル拡張子をsomething.html.haml
からsomething.html.erb
に置き換えてください。
クイックティップス
divのような一般的な要素は簡単に書くことができます
HTML
<div class="myclass">My Text</div>
ハムル
%div.myclass
HAML、略語
.myclass
属性
HTML
<p class="myclass" id="myid">My paragraph</p>
ハムル
%p{:class => "myclass", :id => "myid"} My paragraph
ルビコードの挿入
=と - 記号を付けてルビコードを挿入することができます。
= link_to "Home", home_path
=で始まるコードが実行され、文書に埋め込まれます。
- で始まるコードは実行されますが、ドキュメントには挿入されません。
完全なドキュメント
HAMLは非常に簡単ですが、非常に複雑なので、ドキュメントを読むことをお勧めします 。