Ruby on Rails
Wyświetlenia

CSS HTML JavaScript jQuery MongoDB MySQL postgresql Ruby Language SQL twitter-bootstrap
Szukaj…


Częściowe

Częściowe szablony (częściowe) są sposobem na rozbicie procesu renderowania na łatwiejsze do zarządzania fragmenty. Częściowe pozwalają wyodrębnić fragmenty kodu z szablonów w celu oddzielenia plików, a także ponownie wykorzystać je w szablonach.

Aby utworzyć częściowy, utwórz nowy plik, który zaczyna się znakiem podkreślenia: _form.html.erb

Aby renderować częściowy jako część widoku, użyj metody renderowania w widoku: <%= render "form" %>

  • Uwaga: podkreślenie jest pomijane podczas renderowania
  • Częściowe musi być renderowane przy użyciu ścieżki, jeśli znajduje się w innym folderze

Aby przekazać zmienną do częściowej jako zmienną lokalną, użyj tej notacji:

<%= render :partial => 'form', locals: { post: @post } %>

Części są również przydatne, gdy trzeba ponownie użyć dokładnie tego samego kodu ( filozofia DRY ).

Na przykład, aby ponownie użyć kodu <head> , utwórz częściowy o nazwie _html_header.html.erb , wprowadź swój kod <head> który ma być ponownie użyty, i wyrenderuj częściowy w razie potrzeby: <%= render 'html_header' %> .

Części obiektu

Obiekty, które reagują na to_partial_path można również renderować, jak w <%= render @post %> to_partial_path <%= render @post %> . Domyślnie w przypadku modeli ActiveRecord będzie to coś w rodzaju posts/post , więc po renderowaniu @post zostanie views/posts/_post.html.erb plik views/posts/_post.html.erb .

Lokalny nazwany post zostanie automatycznie przypisany. Na koniec <%= render @post %> <%= render 'posts/post', post: @post %> <%= render @post %> to skrót od <%= render 'posts/post', post: @post %> .

Można również udostępnić kolekcje obiektów, które odpowiadają na to_partial_path , takie jak <%= render @posts %> . Każdy element będzie renderowany kolejno.

Części globalne

Aby utworzyć globalną część cząstkową, której można użyć w dowolnym miejscu bez odniesienia do jej dokładnej ścieżki, część musi znajdować się w ścieżce views/application . Poprzedni przykład został zmodyfikowany poniżej, aby zilustrować tę funkcję.

Na przykład jest to ścieżka do globalnej częściowej app/views/application/_html_header.html.erb:

Aby renderować tę globalną częściową w dowolnym miejscu, użyj <%= render 'html_header' %>

AssetTagHelper

Aby szyny automatycznie i poprawnie łączyły zasoby (css / js / images) w większości przypadków, chcesz użyć wbudowanych helperów. ( Oficjalna dokumentacja )

Pomocnicy obrazu

ścieżka_obrazu

Zwraca ścieżkę do zasobu obrazu w app/assets/images . 

image_path("edit.png") # => /assets/edit.png

image_url

Zwraca pełny adres URL zasobu obrazu w app/assets/images . 

image_url("edit.png") # => http://www.example.com/assets/edit.png

image_tag

Użyj tego pomocnika, jeśli chcesz dołączyć tag <img src="" /> do zestawu źródłowego. 

image_tag("icon.png") # => <img src="/assets/icon.png" alt="Icon" />

Pomocnicy JavaScript

javascript_include_tag

Jeśli chcesz dołączyć plik JavaScript do swojego widoku. 

javascript_include_tag "application" # => <script src="/assets/application.js"></script>

javascript_path

Zwraca ścieżkę do pliku JavaScript. 

javascript_path "application" # => /assets/application.js

javascript_url

Zwraca pełny adres URL pliku JavaScript. 

javascript_url "application" # => http://www.example.com/assets/application.js

Pomocnicy arkuszy stylów

Jeśli chcesz dołączyć plik CSS do swojego widoku. 

stylesheet_link_tag "application" # => <link href="/assets/application.css" media="screen" rel="stylesheet" />

stylesheet_path

Zwraca ścieżkę zasobu arkusza stylów. 

stylesheet_path "application" # => /assets/application.css

stylesheet_url

Zwraca pełny adres URL zasobu arkusza stylów. 

stylesheet_url "application" # => http://www.example.com/assets/application.css

Przykładowe użycie

Podczas tworzenia nowej aplikacji Railsowej automatycznie będziesz mieć dwóch takich pomocników w app/views/layouts/application.html.erb 

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

To daje: 

// 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>

Struktura

Gdy szyny podążają za wzorcem M V C Views są tam, gdzie „szablony” są do twoich działań.

Załóżmy, że masz kontroler articles_controller.rb . Dla tego kontrolera będziesz mieć folder w widokach o nazwie 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
    |
    '-- [...]

Ta struktura pozwala mieć folder dla każdego kontrolera. Podczas wywoływania akcji w kontrolerze odpowiedni widok zostanie wyświetlony automatycznie. 

// articles_controller.rb
class ArticlesController < ActionController::Base
  def show
  end
end

// show.html.erb
<h1>My show view</h1>

Zamień kod HTML w widokach

Jeśli kiedykolwiek chciałeś określić zawartość HTML, która ma zostać wydrukowana na stronie w czasie wykonywania, wtedy szyny mają na to bardzo dobre rozwiązanie. Ma coś o nazwie content_for, co pozwala nam przekazać blok do widoku szyn. Sprawdź poniższy przykład,

Deklaruj content_for 

<div>
  <%= yield :header %>
</div>

<% content_for :header do %>
 <ul>
   <li>Line Item 1</li>
   <li>Line Item 2</li>
 </ul>
<% end %>

HAML - alternatywny sposób użycia w twoich widokach

HAML (język znaczników abstrakcji HTML) to piękny i elegancki sposób opisywania i projektowania HTML twoich widoków. Zamiast tagów otwierających i zamykających, HAML używa wcięć do struktury twoich stron. Zasadniczo, jeśli coś powinno zostać umieszczone w innym elemencie, po prostu wcięcie go za pomocą jednego tabulatora. Tabulatory i białe znaki są ważne w HAML, więc upewnij się, że zawsze używasz tej samej ilości tabulatorów.

Przykłady: 

#myview.html.erb
<h1><%= @the_title %></h1>
<p>This is my form</p>
<%= render "form" %>

A w HAML: 

#myview.html.haml
%h1= @the_title
%p
    This is my form
= render 'form'

Widzisz, struktura układu jest znacznie bardziej przejrzysta niż przy użyciu HTML i ERB.

Instalacja

Wystarczy zainstalować klej za pomocą 

gem install haml

i dodaj klejnot do Gemfile 

gem "haml"

Za korzystanie haml zamiast HTML / ERB, wystarczy wymienić następujące rozszerzenia swoich poglądów z something.html.erb do something.html.haml .

Szybkie napiwki

Wspólne elementy, takie jak div, można zapisać w krótki sposób

HTML 

<div class="myclass">My Text</div>

HAML 

%div.myclass

HAML, stenografia 

.myclass

Atrybuty

HTML 

<p class="myclass" id="myid">My paragraph</p>

HAML 

%p{:class => "myclass", :id => "myid"} My paragraph

Wstawianie kodu ruby

Możesz wstawić kod ruby za pomocą znaków = i -. 

= link_to "Home", home_path

Kod zaczynający się od = zostanie wykonany i osadzony w dokumencie.

Kod zaczynający się od - zostanie wykonany, ale nie wstawiony do dokumentu.

Pełna dokumentacja

HAML jest bardzo łatwy na początek, ale jest również bardzo złożony, dlatego polecam lekturę dokumentacji .



Modified text is an extract of the original Stack Overflow Documentation
Licencjonowany na podstawie CC BY-SA 3.0
Nie związany z Stack Overflow