Ruby on Rails
Visningar

CSS HTML JavaScript jQuery MongoDB MySQL postgresql Ruby Language SQL twitter-bootstrap
Sök…


Partials

Partiella mallar (partier) är ett sätt att dela återgivningsprocessen till mer hanterbara bitar. Partials tillåter dig att extrahera kodbitar från dina mallar för att separera filer och också återanvända dem i dina mallar.

För att skapa ett partiellt skapar du en ny fil som börjar med en understruk: _form.html.erb

För att återge en del som en del av en vy använder du renderingsmetoden i vyn: <%= render "form" %>

  • Observera att understrecket lämnas ut vid rendering
  • En del måste återges med sin sökväg om den finns i en annan mapp

Om du vill överföra en variabel till det partiella som en lokal variabel använder du denna notation:

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

Delar är också användbara när du behöver återanvända exakt samma kod ( DRY-filosofi ).

För att återanvända <head> -koden, skapar du till exempel ett parti med namnet _html_header.html.erb , ange din <head> -kod som ska återanvändas och gör det partiella när det behövs av: <%= render 'html_header' %> .

Objektpartier

Objekt som svarar to_partial_path kan också återges, som i <%= render @post %> . Som standard, för ActiveRecord-modeller, kommer detta att vara något som posts/post , så genom att faktiskt återge @post kommer @post views/posts/_post.html.erb att återges.

Ett lokalt namngivet post tilldelas automatiskt. I slutändan är <%= render @post %> en kort hand för <%= render 'posts/post', post: @post %> .

Samlingar av objekt som svarar to_partial_path kan också tillhandahållas, till exempel <%= render @posts %> . Varje objekt kommer att levereras i följd.

Globala partier

För att skapa ett globalt parti som kan användas var som helst utan att referera till den exakta sökvägen måste partiet vara beläget i views/application . Det föregående exemplet har modifierats nedan för att illustrera den här funktionen.

Till exempel är detta en sökväg till en global partiell app/views/application/_html_header.html.erb:

<%= render 'html_header' %> att återge detta globala parti var som helst

AssetTagHelper

För att låta rälsen automatiskt och korrekt länka tillgångar (css / js / bilder) i de flesta fall vill du använda inbyggda hjälpare. ( Officiell dokumentation )

Bildhjälpare

IMAGE_PATH

Detta returnerar sökvägen till en bildtillgång i app/assets/images . 

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

bild URL

Detta returnerar den fullständiga webbadressen till en bildtillgång i app/assets/images . 

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

image_tag

Använd denna hjälpare om du vill inkludera en <img src="" /> -tagg med källuppsättningen. 

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

JavaScript-hjälpare

javascript_include_tag

Om du vill inkludera en JavaScript-fil i din vy. 

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

javascript_path

Detta returnerar sökvägen för din JavaScript-fil. 

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

javascript_url

Detta returnerar den fullständiga URL: en för din JavaScript-fil. 

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

Stilbladhjälpare

Om du vill inkludera en CSS-fil i din vy. 

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

stylesheet_path

Detta returnerar sökvägen för din stilarktillgång. 

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

stylesheet_url

Detta returnerar den fullständiga webbadressen för din stilarktillgång. 

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

Exempel på användning

När du skapar en ny rails-app kommer du automatiskt att ha två av dessa hjälpare i app/views/layouts/application.html.erb 

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

Denna utgångar: 

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

Strukturera

Eftersom Rails följer M V C-mönstret Views är där dina "mallar" är för dina handlingar.

Låt oss säga att du har en controller articles_controller.rb . För den här kontrollern skulle du ha en mapp i vyer som heter 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
    |
    '-- [...]

Denna struktur låter dig ha en mapp för varje styrenhet. När du ringer en åtgärd i din styrenhet återges lämplig vy automatiskt. 

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

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

Byt ut HTML-kod i vyer

Om du någonsin ville bestämma html-innehållet som ska skrivas ut på en sida under körning då, har rails en mycket bra lösning för det. Det har något som heter content_for som gör att vi kan skicka ett block till en railsvy. Kontrollera exemplet nedan,

Förklara content_for 

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

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

HAML - ett alternativt sätt att använda i dina åsikter

HAML (HTML-abstraktionsmarkeringsspråk) är ett vackert och elegant sätt att beskriva och utforma HTML för dina vyer. Istället för att öppna och stänga taggar använder HAML indrag för strukturen på dina sidor. I grund och botten, om något ska placeras i ett annat element, indikerar du bara det genom att använda ett flikstopp. Flikar och vitrum är viktiga i HAML, så se till att du alltid använder samma mängd flikar.

Exempel: 

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

Och i HAML: 

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

Du förstår, strukturen i layouten är mycket tydligare än att använda HTML och ERB.

Installation

Installera bara pärla med 

gem install haml

och lägg till pärla till Gemfile 

gem "haml"

För att använda HAML istället för HTML / ERB, byt bara ut filändelserna från dina vyer från something.html.erb till something.html.haml .

Snabba tippar

Vanliga element som divs kan skrivas på ett kort sätt

html 

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

HAML 

%div.myclass

HAML, kortfattad 

.myclass

attribut

html 

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

HAML 

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

Infoga rubinkod

Du kan infoga rubinkod med = och - tecknen. 

= link_to "Home", home_path

Kod som börjar med = kommer att köras och inbäddas i dokumentet.

Kod som börjar med - kommer att köras, men inte infogas i dokumentet.

Fullständig dokumentation

HAML är mycket lätt att börja med, men är också väldigt komplex, så jag rekommenderar att du läser dokumentationen .



Modified text is an extract of the original Stack Overflow Documentation
Licensierat under CC BY-SA 3.0
Inte anslutet till Stack Overflow