Ruby on Rails => दृश्य

partials

आंशिक टेम्प्लेट (आंशिक) प्रतिपादन प्रक्रिया को अधिक प्रबंधनीय विखंडू में तोड़ने का एक तरीका है। विभाजन आपको फ़ाइलों को अलग करने के लिए अपने टेम्प्लेट से कोड के टुकड़े निकालने की अनुमति देता है और उन्हें आपके टेम्प्लेट में पुन: उपयोग भी करता है।

एक आंशिक बनाने के लिए, कि एक अंडरस्कोर से शुरू होता है एक नई फ़ाइल बनाना: _form.html.erb

एक दृश्य के हिस्से के रूप एक आंशिक प्रस्तुत करना करने के लिए, दृश्य के भीतर विधि प्रस्तुत करना का उपयोग करें: <%= render "form" %>

ध्यान दें, रेंडर करते समय अंडरस्कोर छोड़ दिया जाता है
यदि किसी भिन्न फ़ोल्डर में स्थित है, तो इसके पथ का उपयोग करके एक आंशिक प्रदान किया जाना है

किसी चर को स्थानीय चर के रूप में आंशिक रूप से पारित करने के लिए , इस संकेतन का उपयोग करें:

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

जब आप एक ही कोड ( DRY दर्शन ) का पुन: उपयोग करने की आवश्यकता होती है, तो भाग भी उपयोगी होते हैं।

उदाहरण के लिए, <head> कोड का पुन: उपयोग करने के लिए, _html_header.html.erb नाम का एक आंशिक बनाएं, पुन: उपयोग किए जाने के लिए अपना <head> कोड दर्ज करें, और जब भी आवश्यकता हो आंशिक <%= render 'html_header' %> : <%= render 'html_header' %> ।

वस्तु विभाजन

ऑब्जेक्ट्स to_partial_path प्रतिक्रिया करते हैं, to_partial_path भी प्रस्तुत किया जा सकता है, जैसा कि <%= render @post %> । डिफ़ॉल्ट रूप से, ActiveRecord मॉडल के लिए, यह posts/post तरह कुछ होगा, इसलिए वास्तव में @post रेंडर @post , फ़ाइल views/posts/_post.html.erb को रेंडर किया जाएगा।

एक स्थानीय नामित post स्वचालित रूप से सौंपा जाएगा। अंत में, <%= render @post %> <%= render 'posts/post', post: @post %> लिए एक छोटा हाथ है <%= render 'posts/post', post: @post %> ।

ऑब्जेक्ट्स का संग्रह to_partial_path प्रतिक्रिया करते हैं, to_partial_path भी प्रदान किया जा सकता है, जैसे कि <%= render @posts %> । प्रत्येक आइटम को लगातार प्रदान किया जाएगा।

ग्लोबल पार्टिकल्स

एक वैश्विक आंशिक बनाने के लिए जिसका उपयोग उसके सटीक पथ को संदर्भित किए बिना कहीं भी किया जा सकता है, आंशिक को views/application पथ में स्थित होना चाहिए। इस विशेषता का वर्णन करने के लिए पिछले उदाहरण को नीचे संशोधित किया गया है।

उदाहरण के लिए, यह एक वैश्विक आंशिक app/views/application/_html_header.html.erb: का एक मार्ग है app/views/application/_html_header.html.erb:

इस वैश्विक आंशिक को कहीं भी रेंडर करने के लिए, <%= render 'html_header' %>

AssetTagHelper

उन मामलों में जो आप उपयोग करना चाहते हैं, स्वचालित रूप से और सही ढंग से रेल्स (सीएसएस / जेएस / इमेज) को रेल से जोड़ने के लिए हेल्पर्स में निर्मित उपयोग करना चाहते हैं। ( आधिकारिक दस्तावेज )

छवि सहायक

IMAGE_PATH

यह app/assets/images में एक छवि संपत्ति का मार्ग देता है।

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

छवि यूआरएल

यह app/assets/images में छवि संपत्ति के लिए पूर्ण URL लौटाता है।

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

IMAGE_TAG

यदि आप स्रोत सेट के साथ <img src="" /> -tag शामिल करना चाहते हैं तो इस सहायक का उपयोग करें।

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

जावास्क्रिप्ट सहायकों

javascript_include_tag

यदि आप अपने विचार में एक जावास्क्रिप्ट-फ़ाइल शामिल करना चाहते हैं।

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

javascript_path

यह आपकी जावास्क्रिप्ट-फ़ाइल का पथ लौटाता है।

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

javascript_url

यह आपकी जावास्क्रिप्ट-फाइल का पूरा URL लौटाता है।

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

स्टाइल्सशीट हेल्पर्स

stylesheet_link_tag

यदि आप अपने विचार में CSS-file शामिल करना चाहते हैं।

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

संरचना

के रूप में रेल एम वी सी पैटर्न 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 नामक कुछ है जो हमें ब्लॉक को रेल दृश्य में पास करने की अनुमति देता है। कृपया नीचे दिए गए उदाहरण की जाँच करें,

सामग्री को घोषित करें

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

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

HAML - आपके विचारों में उपयोग करने का एक वैकल्पिक तरीका

HAML (HTML abstraction markup language) आपके विचारों के HTML का वर्णन और डिजाइन करने का एक सुंदर और सुरुचिपूर्ण तरीका है। टैग खोलने और बंद करने के बजाय, HAML आपके पृष्ठों की संरचना के लिए इंडेंटेशन का उपयोग करता है। मूल रूप से, अगर किसी चीज़ को दूसरे तत्व के भीतर रखा जाना चाहिए, तो आप बस एक टैब स्टॉप का उपयोग करके इसे इंडेंट करते हैं। एचएएमएल में टैब और सफेद स्थान महत्वपूर्ण हैं, इसलिए सुनिश्चित करें कि आप हमेशा समान मात्रा में टैब का उपयोग करते हैं।

उदाहरण:

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

और एचएएमएल में:

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

आप देखते हैं, HTML और ERB का उपयोग करने की तुलना में लेआउट की संरचना बहुत स्पष्ट है।

स्थापना

बस मणि का उपयोग कर स्थापित करें

gem install haml

और मणि को रत्न में जोड़ें

gem "haml"

एचएएमएल / ईआरबी के बजाय एचएएमएल का उपयोग करने के लिए, बस अपने विचारों के फाइल एक्सटेंशन को. something.html.erb से something.html.haml .html.haml में बदलें।

त्वरित टिप

डिव जैसे सामान्य तत्वों को संक्षिप्त रूप में लिखा जा सकता है

एचटीएमएल

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

haml

%div.myclass

एचएएमएल, शॉर्टहैंड

.myclass

गुण

एचटीएमएल

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

haml

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

माणिक कोड सम्मिलित करना

आप रूबी कोड = और - संकेतों के साथ सम्मिलित कर सकते हैं।

= link_to "Home", home_path

= से शुरू होने वाले कोड को निष्पादित किया जाएगा और दस्तावेज़ में एम्बेड किया जाएगा।

कोड के साथ शुरू - निष्पादित किया जाएगा, लेकिन दस्तावेज़ में डाला नहीं।

पूर्ण प्रलेखन

एचएएमएल के साथ शुरू करना बहुत आसान है, लेकिन यह बहुत जटिल है, इसलिए मैं प्रलेखन पढ़ने की सलाह दूंगा।

Modified text is an extract of the original Stack Overflow Documentation

के तहत लाइसेंस प्राप्त है CC BY-SA 3.0

से संबद्ध नहीं है Stack Overflow

Ruby on Rails
दृश्य

खोज…