загрузка содержимого динамически в динамически создаваемых вкладках в бутстраповских рельсах

Question

Я динамически генерировать вкладки в начальной загрузке и рельсы за код ниже:

<ul class="nav nav-tabs" role="tablist" id="tabs"> 
    <% @exercises.each_index do |i| %> 
    <% if i == 0 %> 
     <li class="active"><a href="#<%= @exercises[i].name.downcase %>" data-toggle="tab" aria-controls="<%= @exercises[i].name.downcase %>"><%= @exercises[i].name %></a></li> 
    <% else %> 
     <li><a href="#<%= @exercises[i].name.downcase %>" data-toggle="tab" aria-controls="<%= @exercises[i].name.downcase %>"><%= @exercises[i].name %></a></li> 
    <% end %> 
    <% end %> 
</ul> 

<div class="tab-content"> 
    <% @exercises.each_index do |i| %> 
    <% if i == 0 %> 
     <div class="tab-pane active" id="<%= @exercises[i].name.downcase %>"> 
     First tab 
     </div> 
    <% else %> 
     <div class="tab-pane" id="<%= @exercises[i].name.downcase %>"> 
     Other tab 
     </div> 
    <% end %> 
    <% end %> 
</div> 

Проблема заключается в том, что @exercises будет варьироваться в зависимости от пользователя к пользователю, а не предварительно , Поскольку он не задан, мне нужно создать соответствующий контент в зависимости от того, что было возвращено. First tab и Other tab необходимо заменить содержимым, специфичным для пользователя и упражнения.

Есть ли чистый способ сделать это?

Answer 1

Лучше всего, если упражнения belong_to Пользователь.

В модели пользователя добавьте has_many :exercises и в модели упражнений добавьте belongs_to :user. Объект упражнений должен иметь поле user_id, чтобы указать, что ему принадлежит. Затем вы можете позвонить своему пользователю со всеми упражнениями по user.exercises. Если вы используете устройство, это будет current_user.exercises

С помощью добавления изменений вы получите следующее. О, и вы можете избавиться от беспорядка if/else, просто добавив , если в <li> HTML-тег для class="active".

<% @exercises = current_user.exercises %> 
<ul class="nav nav-tabs" role="tablist" id="tabs"> 
    <% @exercises.each_index do |i| %> 
     <li <%= 'class="active"' if i == 0 %>><a href="#<%= @exercises[i].name.downcase %>" data-toggle="tab" aria-controls="<%= @exercises[i].name.downcase %>"><%= @exercises[i].name %></a></li> 
    <% end %> 
</ul> 

<div class="tab-content"> 
    <% @exercises.each_index do |i| %> 
     <div class="tab-pane <%= 'active' if i == 0 %>" id="<%= @exercises[i].name.downcase %>"> 
     Tab Content 
     </div> 
    <% end %> 
</div> 

Такие же результаты, а тем более код.

Вы также можете выполнить цикл каждого упражнения без использования индекса и изменить, если заявление следующим образом:

<% @exercises.each do |ex| %> 
    <div class="tab-pane <%= 'active' if @exercises.first == ex %>" id="<%= ex.name.downcase %>"> 
    Tab Content 
    </div> 
<% end %> 

Или с каждым экземпляром и индексом

<% @exercises.each.with_index do |ex, i| %> 
    <div class="tab-pane <%= 'active' if i == 0 %>" id="<%= ex.name.downcase %>"> 
    Tab Content 
    </div> 
<% end %> 

Для Tab Content вам просто нужно знайте, какие поля вы используете, с какими чертами. В зависимости от того, что у вас есть, это может быть.

Name is <%= current_user.name %> 
Email is <%= current_user.email %> 
Exercise is <%= exercise.name %> 
Exercise time is <%= exercise.workout_length %> 
Exercise reps are <%= exercise.reps %> 

Это действительно зависит от вашей модели и полей, которые у вас есть.