サーチ…


部分

部分テンプレート(部分)は、レンダリングプロセスをより管理しやすい塊に分割する方法です。パーシャルアールを使用すると、テンプレートからコードを抽出してファイルを分割し、テンプレート全体で再利用することができます。

部分を作成するには_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

スタイルシートヘルパー

ビューに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は非常に簡単ですが、非常に複雑なので、ドキュメントを読むことをお勧めします



Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow