Refactorización simple de HTML
Por: Lukasz Muzyka, en:
ES:This tutorial assumes you have already completed:
Entre más código escribamos en nuestras plantillas de aplicación más difíciles son de entender. A menudo utilizamos los mismos trozos de código dentro de las plantillas por lo que necesitamos tener una manera de extraer esas partes de código y darles referencia.
Paso 1
Podemos refactorizar nuestro código mediante la creación de un archivo "parcial" que llevará a cabo nuestro código. Vamos a intentarlo, creando un nuevo archivo llamado "_menu.html.erb" en app/views/layouts
y remueve algo de código de app/views/layouts/application.html.erb
app/views/layouts/application.html.erb
<!DOCTYPE html> <html> <head> <title>Demo</title> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> <%= csrf_meta_tags %> </head> <body> <% flash.each do |key, value| %> <div class="alert alert-<%= key %> alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button> <%= value %> </div> <% end %> <!--
Éste es el código que se recorta y se pone dentro de menú parcial--> <nav class="navbar navbar-default" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <%= link_to "Demo App", root_path, class: 'navbar-brand' %> </div> <div class="collapse navbar-collapse" id="navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li><%= link_to 'Posts', '#' %></li> <% if current_user %> <li><%= link_to 'Logout', destroy_user_session_path, method: :delete %></li> <% else %> <li><%= link_to 'Login', new_user_session_path %></li> <% end %> </ul> </div> </div> </nav> <!--
Éste es el código que cortaremos--> <div class="container"> <%= yield %> </div> </body> </html>
Paso 2
Pega el código que recortamos en el nuevo archivo _menu.html.erb
:
app/views/layouts/_menu.html.erb
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<%= link_to "Demo App", root_path, class: 'navbar-brand' %>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><%= link_to 'Posts', '#' %></li>
<% if current_user %>
<li><%= link_to 'Logout', destroy_user_session_path, method: :delete %></li>
<% else %>
<li><%= link_to 'Login', new_user_session_path %></li>
<% end %>
</ul>
</div>
</div>
</nav>
Paso 3
Lo mismo podemos hacer con nuestros "mensajes flash". Crea un nuevo archivo en la misma carpeta y llámalo "_flash_messages.html.erb".
app/views/layouts/_flash_messages.html.erb
<% flash.each do |key, value| %>
<div class="alert alert-<%= key %> alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<%= value %>
</div>
<% end %>
Paso 4
Podemos ir al archivo original, eliminar el código innecesario y reemplazarlo con render.
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= render 'layouts/flash_messages' %>
<%= render 'layouts/menu' %>
<div class="container">
<%= yield %>
</div>
</body>
</html>
Mucho mejor, asegúrate de que todo funcione, la refactorizacion no debe de cambiar nada del contenido de tu página.
Comentar
Tú puedes Inicio de sesión Comentar