Ruby on Rails
Ansichten

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


Teilstücke

Teilvorlagen (Partials) sind eine Möglichkeit, den Rendering-Prozess in überschaubarere Abschnitte zu unterteilen. Mit Partials können Sie Code-Teile aus Ihren Vorlagen extrahieren, um Dateien zu trennen und sie auch in Ihren Vorlagen wiederzuverwenden.

Um einen Teil zu erstellen, erstellen Sie eine neue Datei, die mit einem Unterstrich beginnt: _form.html.erb

Verwenden Sie zum Rendern eines Teils als Teil einer Ansicht die Render-Methode in der Ansicht: <%= render "form" %>

  • Beachten Sie, dass der Unterstrich beim Rendern ausgelassen wird
  • Ein Teil muss mit seinem Pfad gerendert werden, wenn es sich in einem anderen Ordner befindet

Um eine Variable in den Teil als lokaler Variable, verwenden Sie diese Notation übergeben:

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

Partials sind auch nützlich, wenn Sie genau denselben Code wiederverwenden müssen ( DRY-Philosophie ).

Um beispielsweise <head> -Code wiederzuverwenden, erstellen Sie einen partiellen Namen namens _html_header.html.erb , geben Sie Ihren <head> -Code ein, der wiederverwendet werden soll, und rendern Sie den partiellen Code bei Bedarf durch: <%= render 'html_header' %> .

Objektpartials

Objekte, die auf to_partial_path antworten, können auch gerendert werden, wie in <%= render @post %> . Standardmäßig handelt es sich bei ActiveRecord-Modellen so etwas wie posts/post @post tatsächlich rendern, werden die Dateien views/posts/_post.html.erb gerendert.

Ein lokal benannter post wird automatisch zugewiesen. Am Ende ist <%= render @post %> eine kurze Hand für <%= render 'posts/post', post: @post %> .

to_partial_path können auch Sammlungen von Objekten bereitgestellt werden, die auf to_partial_path antworten, beispielsweise <%= render @posts %> . Jedes Element wird nacheinander gerendert.

Globale Partials

Um ein globales Partial zu erstellen, das überall verwendet werden kann, ohne auf den genauen Pfad zu verweisen, muss das Partial in den views/application . Das vorige Beispiel wurde unten geändert, um diese Funktion zu veranschaulichen.

Dies ist beispielsweise ein Pfad zu einem globalen Teil von app/views/application/_html_header.html.erb:

Verwenden Sie <%= render 'html_header' %> um dieses globale Teil überall <%= render 'html_header' %>

AssetTagHelper

In den meisten Fällen, in denen Sie integrierte Helfer verwenden möchten, lassen Sie Assets (css / js / images) automatisch und korrekt verknüpfen. ( Offizielle Dokumentation )

Bildhelfer

Bildpfad

Dadurch wird der Pfad zu einem Bildasset in app/assets/images . 

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

Bild URL

Dadurch wird die vollständige URL zu einem Bildasset in app/assets/images . 

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

image_tag

Verwenden Sie diesen Helfer, wenn Sie einen <img src="" /> -Tag in die Quellgruppe aufnehmen möchten. 

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

JavaScript-Helfer

javascript_include_tag

Wenn Sie eine JavaScript-Datei in Ihre Ansicht aufnehmen möchten. 

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

Javascript_Pfad

Dies gibt den Pfad Ihrer JavaScript-Datei zurück. 

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

javascript_url

Dies gibt die vollständige URL Ihrer JavaScript-Datei zurück. 

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

Stylesheet-Helfer

Wenn Sie eine CSS-Datei in Ihre Ansicht aufnehmen möchten. 

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

stylesheet_path

Dies gibt den Pfad Ihres Stylesheet-Assets zurück. 

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

stylesheet_url

Dies gibt die vollständige URL Ihres Stylesheet-Assets zurück. 

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

Verwendungsbeispiel

Beim Erstellen einer neuen Schienen-App stehen Ihnen automatisch zwei dieser Helfer in app/views/layouts/application.html.erb 

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

Dies gibt aus: 

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

Struktur

Als Rails die M V C Muster folgt Views sind , wo Ihre „Vorlagen“ für Ihre Handlungen sind.

Nehmen wir an, Sie haben einen Controller articles_controller.rb . Für diesen Controller haben Sie einen Ordner in Ansichten, der als 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
    |
    '-- [...]

Diese Struktur ermöglicht es Ihnen, für jeden Controller einen Ordner zu erstellen. Beim Aufruf einer Aktion in Ihrem Controller wird die entsprechende Ansicht automatisch gerendert. 

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

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

Ersetzen Sie HTML-Code in Ansichten

Wenn Sie schon einmal den HTML-Inhalt ermitteln wollten, der zur Laufzeit auf einer Seite gedruckt werden soll, bietet rail eine sehr gute Lösung dafür. Es hat etwas namens content_for , mit dem wir einen Block an eine Schienenansicht übergeben können. Bitte überprüfen Sie das Beispiel unten.

Deklarieren Sie content_for 

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

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

HAML - eine alternative Möglichkeit, Ihre Ansichten zu verwenden

HAML (HTML Abstraction Markup Language) ist eine schöne und elegante Möglichkeit, den HTML-Code Ihrer Ansichten zu beschreiben und zu gestalten. Anstatt Tags zu öffnen und zu schließen, verwendet HAML die Einrückung für die Struktur Ihrer Seiten. Wenn etwas in ein anderes Element eingefügt werden soll, wird es einfach mit einem Tabulator eingerückt. In HAML sind Registerkarten und Leerzeichen wichtig. Stellen Sie daher sicher, dass Sie immer dieselbe Anzahl von Registerkarten verwenden.

Beispiele: 

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

Und in HAML: 

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

Sie sehen, die Struktur des Layouts ist viel klarer als die Verwendung von HTML und ERB.

Installation

Installieren Sie einfach den Edelstein mit 

gem install haml

und füge den Edelstein zum Gemfile hinzu 

gem "haml"

Für HAML anstelle von HTML / ERB verwenden, ersetzen nur die Dateierweiterungen Ihrer Ansichten von something.html.erb something.html.haml .

Schnelle Tipps

Gemeinsame Elemente wie divs können kurz geschrieben werden

HTML 

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

HAML 

%div.myclass

HAML, Abkürzung 

.myclass

Attribute

HTML 

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

HAML 

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

Ruby-Code einfügen

Sie können Ruby-Code mit den = und - Zeichen einfügen. 

= link_to "Home", home_path

Code, der mit = beginnt, wird ausgeführt und in das Dokument eingebettet.

Code, der mit - beginnt, wird ausgeführt, aber nicht in das Dokument eingefügt.

Vollständige Dokumentation

HAML ist sehr einfach zu beginnen, aber auch sehr komplex. Ich empfehle Ihnen, die Dokumentation zu lesen .



Modified text is an extract of the original Stack Overflow Documentation
Lizenziert unter CC BY-SA 3.0
Nicht angeschlossen an Stack Overflow