Как отображать элементы (значки) динамически, только если пользователь вводит номер? Рельсы 5.2 - PullRequest
0 голосов
/ 17 января 2020

Я создаю приложение для недвижимости, где пользователи могут добавлять такие удобства, как ванные комнаты, гараж, кухня и т. Д. c и т. c.

Дело в том, что я хочу, чтобы, если пользователь вводит номер, скажем, 1 ванная комната и 1 кухня, и если он оставит пустыми другие удобства, он покажет только тот, который он заполнил. Я использую вложенные атрибуты:

модель property.rb

class Property < ApplicationRecord
    belongs_to :owner
    has_many :amenities
    accepts_nested_attributes_for :amenities
end

модель amenity.rb

class Amenity < ApplicationRecord
    belongs_to :property
end

show. html .erb

 <div class="section">    
    <div class="row">
        <div class="container">
            <div class="col l6">
                <h5>Description</h5>
                <p class="text-justify"><%= @property.description %></p>
            </div>

            <div class="col l6">
                <h5>Amenities</h5>

               <!--Nested icons-->
                <% @property.amenities.each do |amenity|%>
                    <div class="col l2">
                        <div class="center-align">
                            <i class="material-icons-two-tone px32 no-margin-top-bottom">fitness_center</i>
                            <p class="no-margin-top-bottom">gym</p>
                            <p class="no-margin-top-bottom"><%= amenity.gym %></p>
                        </div>
                    </div>

                    <div class="col l2">
                        <div class="center-align">
                            <i class="material-icons-two-tone px32 no-margin-top-bottom">fitness_center</i>
                            <p class="no-margin-top-bottom">kitchen</p>
                            <p class="no-margin-top-bottom"><%= amenity.kitchen %></p>
                        </div>
                    </div>
                <% end %>   
            </div>
        </div>
    </div>

Форма собственности

<%= form_with(model: property, local: true) do |form| %>
    <% if property.errors.any? %>
        <div id="error_explanation">
            <h2><%= pluralize(property.errors.count, "error") %> prohibited this property from being saved:</h2>

            <ul>
                <% property.errors.full_messages.each do |message| %>
                    <li><%= message %></li>
                <% end %>
            </ul>
        </div>
    <% end %>

    <div class="section">
        <div class="row">
            <div class="container">
                <div class="col l9">
                    <div class="col l5">
                        <div class="input-field">
                            <i class="material-icons-two-tone prefix">edit</i>
                            <label for="icon_prefix"><%= form.label :name %></label><br />
                            <%= form.text_field :name, class:"form-control" %>
                        </div>
                    </div>

                    <div class="col l6">
                        <div class="input-field">
                            <i class="material-icons-two-tone prefix">edit</i>
                            <label for="icon_prefix"><%= form.label :description %></label><br />
                            <%= form.text_area :description, class:"form-control materialize-textarea" %>
                        </div>
                    </div>

                    <div class="col l2">
                        <div class="input-field">
                            <i class="material-icons-two-tone"></i>
                            <label for="icon_prefix"><%= form.label :price %></label>
                            <%= form.number_field :price, class:"form-control" %>
                        </div>
                    </div>
                </div>

                <div class="col l12">
                    <div class="section">
                        <h5>Amenidades</h5>
                        <%= form.fields_for :amenities do |amenities_form| %>
                            <div class="col l2">
                                <div class="input-field">
                                    <i class="material-icons-two-tone prefix">fitness_center</i>
                                    <label for="icon_prefix"><%= amenities_form.label :gym %></label><br>
                                    <%= amenities_form.number_field :gym %>
                                </div>
                            </div>

                            <div class="col l2">
                                <div class="input-field">
                                    <i class="material-icons-two-tone prefix">kitchen</i>
                                    <label for="icon_prefix"><%= amenities_form.label :kitchen %></label><br>
                                    <%= amenities_form.number_field :kitchen %>
                                </div>
                            </div>

                           <div class="col l2">
                                <div class="input-field">
                                    <i class="material-icons-two-tone prefix">garage</i>
                                    <label for="icon_prefix"><%= amenities_form.label :garage %></label><br>
                                    <%= amenities_form.number_field :garage %>
                                </div>
                            </div>
                        <% end %>
                    </div>
                </div>
            </div>  
        </div>
    </div>

    <div class="section">
        <div class="actions center-align">
            <%= form.submit class:"waves-effect waves-light btn" %>
        </div>
    </div>
<% end %>

Как видите, мне нужно продублировать значки, но проблема в том, что если пользователь оставит поле пустым, номер не будет отображаться, но значок появится, поэтому я просто хочу, чтобы значок и номер удобства динамически.

Я буду признателен за вашу помощь! : D

1 Ответ

1 голос
/ 17 января 2020

В вашем шоу. html .erb вы можете добавить условия - я добавил для amenity.gym

 <div class="section">    
    <div class="row">
        <div class="container">
            <div class="col l6">
                <h5>Description</h5>
                <p class="text-justify"><%= @property.description %></p>
            </div>

            <div class="col l6">
                <h5>Amenities</h5>

               <!--Nested icons-->
                <% @property.amenities.each do |amenity|%>
                  <% if amenity.gym.present? %> ----> From Here
                    <div class="col l2">
                        <div class="center-align">
                            <i class="material-icons-two-tone px32 no-margin-top-bottom">fitness_center</i>
                            <p class="no-margin-top-bottom">gym</p>
                            <p class="no-margin-top-bottom"><%= amenity.gym %></p>
                        </div>
                    </div>
                  <% end %> -- Till Here
                    <div class="col l2">
                        <div class="center-align">
                            <i class="material-icons-two-tone px32 no-margin-top-bottom">fitness_center</i>
                            <p class="no-margin-top-bottom">kitchen</p>
                            <p class="no-margin-top-bottom"><%= amenity.kitchen %></p>
                        </div>
                    </div>
                <% end %>   
            </div>
        </div>
    </div>
...