Refactorización simple de HTML

Refactorización simple de HTML

Por:, en:

ES:This tutorial assumes you have already completed:

  1. Managing Users with Devise

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.

Si tu Inicio de sesión serás capaz de marcar esto tutorial Como vas avanzando tu progreso



Comentar

Tú puedes Inicio de sesión Comentar


Anterior Siguiente