Ruby on Rails
조회수
수색…
부분
부분 템플릿 (partial)은 렌더링 프로세스를보다 관리하기 쉬운 조각으로 나눌 수있는 방법입니다. Partials를 사용하면 템플릿에서 코드 조각을 추출하여 파일을 분리하고 템플릿 전체에서 다시 사용할 수 있습니다.
부분을 만들려면, 밑줄로 시작하는 새 파일을 만듭니다 _form.html.erb
뷰의 일부로 부분을 렌더링 하려면 뷰 내에서 render 메서드를 사용하십시오. <%= render "form" %>
- 렌더링시 밑줄은 생략됩니다.
- 다른 폴더에있는 경우 해당 경로를 사용하여 부분을 렌더링해야합니다.
변수를 부분 변수에 지역 변수로 전달 하려면 다음 표기법을 사용하십시오.
<%= render :partial => 'form', locals: { post: @post } %>
부분 코드는 동일한 코드 ( DRY 철학 )를 정확히 재사용 해야하는 경우에도 유용합니다.
예를 들어, <head> 코드를 재사용하려면 _html_header.html.erb 이라는 부분을 _html_header.html.erb , <head> 코드를 입력하여 재사용 할 수 있습니다. <%= render 'html_header' %> .
오브젝트 부분
<%= render @post %> to_partial_path <%= render @post %> 와 같이 to_partial_path 응답하는 객체도 렌더링 할 수 있습니다. 기본적으로 ActiveRecord 모델의 경우 posts/post 와 같으므로 실제로 @post 렌더링하면 views/posts/_post.html.erb 파일이 렌더링됩니다.
로컬 이름이 지정된 post 이 자동으로 지정됩니다. 결국 <%= render @post %> 는 <%= render 'posts/post', post: @post %> 의 짧은 손입니다.
<%= render @posts %> 와 같이 to_partial_path 응답하는 객체 컬렉션도 제공 할 수 있습니다. 각 항목은 연속적으로 렌더링됩니다.
글로벌 부분
정확한 경로를 참조하지 않고 어디에서나 사용할 수있는 전역 부분을 작성하려면 partial이 views/application 경로에 있어야합니다. 이전 예제는이 기능을 설명하기 위해 아래에서 수정되었습니다.
예를 들어, 다음은 전역 부분 app/views/application/_html_header.html.erb: 대한 경로입니다 app/views/application/_html_header.html.erb:
이 전역 부분을 어디서나 렌더링하려면 <%= render 'html_header' %>
AssetTagHelper
대부분의 경우에 레일을 자동으로 올바르게 자산 (CSS / js / 이미지)에 링크 시키려면 내장 헬퍼를 사용하고 싶습니다. ( 공식 문서 )
이미지 도우미
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_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 두 헬퍼가 자동으로 생성 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 는 사용자의 "템플릿"이 작업에 필요한 위치입니다.
컨트롤러가 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 라고 불리는 것을 가지고있어서 우리가 레일 뷰에 블록을 전달할 수있게 해줍니다. 아래의 예를 확인하십시오.
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은 페이지의 구조에 들여 쓰기를 사용합니다. 기본적으로, 뭔가 다른 요소 내에 배치 해야하는 경우 한 탭 중지를 사용하여 들여 쓰기. HAML에서는 탭과 공백이 중요하므로 항상 같은 양의 탭을 사용해야합니다.
예 :
#myview.html.erb
<h1><%= @the_title %></h1>
<p>This is my form</p>
<%= render "form" %>
그리고 HAML :
#myview.html.haml
%h1= @the_title
%p
This is my form
= render 'form'
HTML과 ERB를 사용하는 것보다 레이아웃 구조가 훨씬 명확합니다.
설치
그냥 보석을 사용하여 설치
gem install haml
gemfile에 gem을 추가하십시오.
gem "haml"
HTML / ERB 대신 HAML을 사용하려면,보기의 파일 확장자를 something.html.haml 에서 something.html.erb 로 바꿉니다.
빠른 팁
div와 같은 일반적인 요소는 짧은 방법으로 작성할 수 있습니다.
HTML
<div class="myclass">My Text</div>
햄
%div.myclass
햄, 속기
.myclass
속성
HTML
<p class="myclass" id="myid">My paragraph</p>
햄
%p{:class => "myclass", :id => "myid"} My paragraph
루비 코드 삽입하기
= 및 - 기호를 사용하여 루비 코드를 삽입 할 수 있습니다.
= link_to "Home", home_path
=로 시작하는 코드가 실행되어 문서에 삽입됩니다.
-로 시작하는 코드는 실행되지만 문서에 삽입되지는 않습니다.
전체 문서
HAML은 시작하기가 쉽지만 매우 복잡하므로 설명서를 읽는 것이 좋습니다.