Our Rails Layout will something like this
<html>
<title>Content_for</title>
<head>
<%=stylesheet_link_tag 'application'%>
</head>
<body>
<div id='header'> </div>
<div id='content'><%=yield%></div>
<div id='sidebar'> </div>
<div id='footer'> </div>
</body>
</html>
If you want to change something in the layout on a per-template basis, content_for is your answer! This allows templates to specify view code that can be placed anywhere in a layout.
Now we want to include one more stylesheet for our index.html.erb,that should be used only for index.html.erb & not for other.
Assume there are two controllers
1.light
2.image
Both controllers are using the same layout,but each controllers need different css & stylesheets.For this purpose we will be using content_for
Example
In this example,content_for have been used & it is called in the layout itself,so the brower is showing the block content.
Code
Browser
Similarly we can use this for diff controllers.
1.Define our Layout
View code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<meta name="Description" content="A free open source web design by Gen. Free for anyone to use as long as credits are intact. " />
<meta name="Keywords" content="open source web design,http://gendesigns.blogspot.com" />
<meta name="Copyright" content="Gen" />
<meta name="Designed By" content="http://gendesigns.blogspot.com" />
<meta name="Language" content="English" />
<title>Image Gallery Demo</title>
<%=yield :head%>
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="content">
<div id="yield"><%=yield%></div>
</div>
<div id='carsoul'>
<%=yield :carsoul%>
</div>
<%=yield :carscript%>
<%=yield :controller2%>
<div id="footer">
</div>
</div>
</body>
</html>
2.Define content_for in light controller
View code
Now content_for has been defined for the light controller for index action.
index.html.erb
<ul>
<%=render :partial=>'image_show' ,:collection=>@images%>
</ul>
<% content_for :carsoul do %>
<div id="horizontal_carousel">
<div class="previous_button"></div>
<div class="container">
<ul>
<%=render :partial=>'image_show' ,:collection=>@images%>
</ul>
</div>
<div class="next_button"></div>
</div>
<% end %>
<% content_for :carscript do %>
<script type="text/javascript">
// <![CDATA[
function runTest() {
hCarousel = new UI.Carousel("horizontal_carousel");
}
Event.observe(window, "load", runTest);
// ]]>
</script>
<%end%>
<%content_for :head do%>
<%=stylesheet_link_tag '/lightview/stylesheets/base'%>
<%=stylesheet_link_tag '/lightview/stylesheets/lightview'%>
<%=javascript_include_tag '/lightview/javascripts/prototype'%>
<%=javascript_include_tag '/lightview/javascripts/scriptaculous.js'%>
<%=javascript_include_tag '/lightview/javascripts/lightview'%>
<%=javascript_include_tag '/lightview/javascripts/carousel'%>
<%=stylesheet_link_tag '/lightview/stylesheets/prototype-ui'%>
<%end%>
Here the css & js files have used only for index.html.erb.so other actions wont be able to access the style & css
3.Define content_for in image controller
View code
Now we have defined content_for in image controller for the action new
new.html.erb
<% form_for(:image,:url=>{:action => 'upload' },:html => { :multipart => true }) do |f| %>
Upload a new image
<%= f.file_field :uploaded_data, :class => 'input-file' %>
<%= f.submit 'upload' %>
</p>
<% end %>
<%content_for :controller2 do%>
<h1>Stylesheet & js files not available for here</h1>
<%end%>
4.Output of content_for
Just view the figures below.
Light controller
Image controller
Page source for light controller
Page source for image controller
No comments :
Post a Comment