수색…


부분

부분 템플릿 (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

스타일 시트 도우미

보기에 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은 시작하기가 쉽지만 매우 복잡하므로 설명서를 읽는 것이 좋습니다.



Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow