Django + Bootstrap +导航选项卡显示错误

Question

我正在Django中生成模板。 这个想法是根据项目参数中的条目生成并填充Bootstrap导航选项卡。 例如。 如果item1属于room1，则应该在选项卡中显示room1，并在其中显示item1。 如果item2也属于room1，则应将其放在选项卡room1中。 同样的情况也适用于room2等。从Django POV看来，一切正常，但是我在渲染网站时遇到了麻烦。

在下面，您可以找到我由Django生成的html页面。

{% 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定义的选项卡标题的数量，然后将内容分别放置在每个nav-tabs tab-pane中
• 应该有一个活动的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)