Zoeken…


Partials

Gedeeltelijke sjablonen (gedeeltelijke) zijn een manier om het renderingproces op te delen in beter beheersbare brokken. Met partials kunt u stukjes code uit uw sjablonen halen om bestanden te scheiden en deze ook opnieuw gebruiken in uw sjablonen.

Als u een gedeeltelijke wilt maken , maakt u een nieuw bestand dat begint met een onderstrepingsteken: _form.html.erb

Een gedeeltelijke maken als onderdeel van het oog, maken gebruik van de methode in het oog: <%= render "form" %>

  • Let op, het onderstrepingsteken wordt weggelaten bij het renderen
  • Een gedeeltelijke weergave moet met behulp van het pad worden weergegeven als deze zich in een andere map bevindt

Gebruik deze notatie om een variabele door te geven aan de gedeeltelijke als een lokale variabele:

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

Partials zijn ook handig als je nodig hebt om precies opnieuw dezelfde code (DRY filosofie).

Als u bijvoorbeeld <head> -code opnieuw wilt gebruiken, maakt u een gedeeltelijke naam _html_header.html.erb , voert u uw <head> -code in die moet worden hergebruikt en geeft u de gedeeltelijke waar nodig weer door: <%= render 'html_header' %> .

Object partials

Objecten die reageren to_partial_path kunnen ook worden weergegeven, zoals in <%= render @post %> . Voor ActiveRecord-modellen is dit standaard zoiets als posts/post , dus door @post daadwerkelijk weer te @post , worden de bestandsweergaven views/posts/_post.html.erb weergegeven.

Een lokaal benoemd post wordt automatisch toegewezen. Uiteindelijk is <%= render @post %> een korte hand voor <%= render 'posts/post', post: @post %> .

Collecties van objecten die reageren to_partial_path kunnen ook worden verstrekt, zoals <%= render @posts %> . Elk item wordt opeenvolgend weergegeven.

Wereldwijde partials

Om een globaal deel te maken dat overal kan worden gebruikt zonder te verwijzen naar het exacte pad, moet het deel zich in het views/application . Het vorige voorbeeld is hieronder aangepast om deze functie te illustreren.

Dit is bijvoorbeeld een pad naar een algemene gedeeltelijke app/views/application/_html_header.html.erb:

Gebruik <%= render 'html_header' %> om dit globale deel overal weer te <%= render 'html_header' %>

AssetTagHelper

Om rails automatisch en correct activa (css / js / images) te laten koppelen, wilt u in de meeste gevallen ingebouwde helpers gebruiken. ( Officiële documentatie )

Afbeelding helpers

image_path

Dit retourneert het pad naar een afbeeldingsitem in app/assets/images .

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

afbeelding URL

Dit retourneert de volledige URL naar een afbeeldingsitem in app/assets/images .

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

image_tag

Gebruik deze helper als u een <img src="" /> -tag wilt toevoegen aan de bronset.

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

JavaScript-helpers

javascript_include_tag

Als u een JavaScript-bestand in uw weergave wilt opnemen.

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

javascript_path

Dit retourneert het pad van uw JavaScript-bestand.

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

javascript_url

Dit retourneert de volledige URL van uw JavaScript-bestand.

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

Helpers van stylesheets

Als u een CSS-bestand in uw weergave wilt opnemen.

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

stylesheet_path

Dit retourneert het pad van uw stijlbladitem.

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

stylesheet_url

Dit retourneert de volledige URL van uw stijlbladitem.

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

Voorbeeld gebruik

Wanneer u een nieuwe rails-app maakt, hebt u automatisch twee van deze helpers 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' %>

Dit geeft uit:

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

Structuur

Aangezien Rails het M V C-patroon volgt, zijn Views uw "sjablonen" voor uw acties.

Stel dat u een controller articles_controller.rb . Voor deze controller zou je een map in views hebben genaamd 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
    |
    '-- [...]

Met deze structuur kunt u een map hebben voor elke controller. Wanneer u een actie in uw controller oproept, wordt de juiste weergave automatisch weergegeven.

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

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

Vervang HTML-code in Views

Als u ooit de html-inhoud wilde bepalen die tijdens runtime op een pagina moet worden afgedrukt, heeft rails daar een zeer goede oplossing voor. Het heeft iets genaamd content_for waarmee we een blok kunnen doorgeven aan een railweergave. Controleer het onderstaande voorbeeld,

Declareer content_for

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

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

HAML - een alternatieve manier om in uw weergaven te gebruiken

HAML (HTML-abstractiemarkuptaal) is een mooie en elegante manier om de HTML van uw weergaven te beschrijven en te ontwerpen. In plaats van tags voor openen en sluiten, gebruikt HAML inspringen voor de structuur van uw pagina's. Kortom, als er iets in een ander element moet worden geplaatst, laat u het gewoon inspringen door één tabstop te gebruiken. Tabbladen en witruimte zijn belangrijk in HAML, dus zorg ervoor dat u altijd hetzelfde aantal tabbladen gebruikt.

Voorbeelden:

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

En in HAML:

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

U ziet, de structuur van de lay-out is veel duidelijker dan het gebruik van HTML en ERB.

Installatie

Installeer gewoon de edelsteen met

gem install haml

en voeg de edelsteen toe aan de Gemfile

gem "haml"

Als u HAML in plaats van HTML / ERB wilt gebruiken, vervangt u gewoon de bestandsextensies van uw weergaven van something.html.erb naar something.html.haml .

Snelle tips

Gemeenschappelijke elementen zoals divs kunnen op een korte manier worden geschreven

HTML

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

HAML

%div.myclass

HAML, steno

.myclass

attributen

HTML

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

HAML

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

Ruby-code invoegen

U kunt ruby code invoegen met de = en - tekens.

= link_to "Home", home_path

Code die begint met = wordt uitgevoerd en ingebed in het document.

Code die begint met - wordt uitgevoerd, maar niet in het document ingevoegd.

Volledige documentatie

HAML is heel eenvoudig om mee te beginnen, maar is ook erg complex, dus ik raad aan de documentatie te lezen .



Modified text is an extract of the original Stack Overflow Documentation
Licentie onder CC BY-SA 3.0
Niet aangesloten bij Stack Overflow