Django + Bootstrap + nav-tabs отображаются неправильно

Question

Я генерирую шаблон в Django. Идея заключается в создании и заполнении навигационных вкладок Bootstrap в соответствии с элементами в параметрах элементов. Например. Если item1 принадлежит комнате1, номер 1 должен отображаться на вкладке и отображаемый там пункт 1. Если item2 также принадлежит комнате 1, его следует поместить в комнату tab1. Та же история относится к комнате2 и т. Д. Из Django POV кажется, что все в порядке, но у меня проблемы с рендерингом.

Ниже вы можете найти мою html-страницу, созданную Django.

{% extends "main.html" %} 
{% block items %} 
{% if items.count > 0 %} 

<div class="tabbable"> 
      <ul class="nav nav-tabs"> 
{% for roomlist in rooms %} 
     {% if roomlist.id == 1 %} 
      <li class="active"><a href="#{{ roomlist.room_name }}" data-toggle="tab">{{ roomlist.room_name }}</a></li> 
     {% else %} 
     <li><a href="#{{ roomlist.room_name }}" data-toggle="tab">{{ roomlist.room_name }}</a></li> 
     {% endif %} 
{% endfor %} 
      </ul> 

     <div class="tab-content"> 
     {% for roomlist in rooms %} 
     {% for item in items %} 
      {% if item.room_id == roomlist.id %} 
     <div id="{{ roomlist.room_name }}" class="tab-pane active">{{ item.id }}</div> 
      {% endif %} 
     {% endfor %} 
     {% endfor %} 
     </div> 
</div> 


{% else %} 
<p>No items</p> 
{% endif %} 
{% endblock %} 

С HTML POV также выглядит нормально:

<div class="tabbable"> 
     <ul class="nav nav-tabs">  
     <li class="active"><a href="#Kitchen" data-toggle="tab">Kitchen</a></li> 
     <li><a href="#Sleep" data-toggle="tab">Sleep</a></li> 
     </ul> 
     <div class="tab-content"> 
     <div id="Kitchen" class="tab-pane active">2</div> 
     <div id="Kitchen" class="tab-pane active">3</div> 
     <div id="Sleep" class="tab-pane active">4</div> 
     <div id="Sleep" class="tab-pane active">6</div> 
     </div> 
</div> 

модель:

from django.db import models 
from django.contrib.auth.models import User 

class RoomList(models.Model): 
    room_name =models.CharField(max_length=150) 
    user = models.ForeignKey(User) 
    size = models.DecimalField(max_digits=5, decimal_places=2) 
    comment = models.TextField() 

    def __unicode__(self): 
     return self.room_name 

class Item(models.Model): 
    product = models.CharField(max_length=150) 
    quantity = models.DecimalField(max_digits=8, decimal_places=3) 
    price = models.DecimalField(max_digits=7, decimal_places=2) 
    purchase_date = models.DateField(null=True, blank=True) 
    warranty = models.DecimalField(max_digits=4, decimal_places=1) 
    comment = models.TextField() 
    room = models.ForeignKey(RoomList) 
    user = models.ForeignKey(User) 

    def __unicode__(self): 
     return self.product 

Проблема заключается в том, что, когда я нажимаю кнопку обновления, все элементы расположены на вкладке «Кухня », даже те, которые предназначены для« сна ». Позже, когда я нажимаю вкладку «Спящая комната», есть только один элемент - сначала (правильный, так предназначенный для «сна»). Затем, когда я нажимаю на вкладку «Кухня», я увижу первый элемент, также верный, который был предназначен для «Кухни». Знаете ли вы, почему я наблюдаю такие явления? Как это исправить?

Answer 1

Проблемы:

• tab-pane должно быть равно числу заголовка вкладки, определенного в nav-tabs, а затем поместить содержимое внутри tab-pane для соответствующего nav-tabs
• Там должно быть один активный tab-pane

Усовершенствования: - Вам не нужно передавать предметы в контекст, вы можете получить доступ к элементам комнаты непосредственно в шаблоне, используя room.items.all, просто определить related_name для RoomList в Item модели

Так вот усовершенствованный код:

{% extends "main.html" %} 
{% load item_tags %} 

{% block items %} 
    {% if rooms %} 
    <div class="tabbable"> 
     <ul class="nav nav-tabs"> 
      {% for room in rooms %} 
       <li{% if room.id == 1 %} class="active"{% endif %}><a href="#room_{{ room.id }}" data-toggle="tab">{{ room.room_name }}</a></li> 
      {% endfor %} 
     </ul> 

     <div class="tab-content"> 
      {% for room in rooms %} 
       <div id="room_{{ room.id }}" class="tab-pane{% if room.id == 1 %} active{% endif %}"> 
        <ul class="unstyled"> 
         {% filter_items room as items %} 
         {% for item in items %} 
          <li>{{ item.id }}</li> 
         {% empty %} 
          <li>Sorry! No Items</li> 
         {% endfor %} 
        </ul> 
       </div> 
      {% endfor %} 
     </div> 
    </div> 
    {% else %} 
     <p>Sorry! No rooms available</p> 
    {% endif %} 
{% endblock %} 

Чтобы отфильтровать элементы, основанные на пользователе, нужно, чтобы написать пользовательский тег (Я обновил свой ответ выше использовать этот обычай тег):

MyApp/templatetags/item_tags.py

@register.assignment_tag(takes_context=True) 
def filter_items(context, room): 
    request = context['request'] 
    return room.items.filter(user__id=request.user.id)