Prosta Refaktoryzacja HTML

Przez:, Z dnia:

Ten tutorial zakłada, że już ukończyłeś:

  1. Managing Users with Devise

Z czasem, jak piszemy coraz więcej kodu w naszych szablonach HTML, stają się one trudniejsze do zrozumienia. Często też używamy takich samych części kodu w wielu szablonach. Musimy znaleźć sposób na wydobycie tych części kodu i stworzyć do nich nawiązania.

Krok 1

Możemy zmienić kod przez stworzenie pliku "partial", który będzie trzymał nasz kod. Stwórzmy nowy plik "_menu.html.erb" w app/views/layouts i przenieśmy trochę kodu z 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 %>

  <!-- this is code we will cut out and put inside menu partial -->

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

  <!-- this is code we will cut out -->

  <div class="container">
    <%= yield %>
  </div>

  </body>
</html>

Krok 2

Wklej kod do pliku _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>

Krok 3

To samo możemy zrobić z naszymi "wiadomościami flash". Stwórz nowy plik w tym samym i nazwij go "_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 %>

Krok 4

Możemu przejść do oryginalnego pliku, usunąć niepotrzebny kod i zastąpić go 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>

Znacznie lepiej. Upewnij się, że wszystko działa (i nasza refaktoryzacja nie powinna nic zmienić).

Musisz się zalogować by móc oznaczyć tutorial jako ukończony żeby śledzić swój postęp



Dodaj komentarz

Możesz się zalogować by skomentować