Question

我在Django中生成模板。我们的想法是根据items参数中的条目生成并填充Bootstrap nav-tabs。例如。如果item1属于room1，则room1应显示在tab中，而item1显示在那里。如果item2也属于room1，则应将其放入tab 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

问题在于，当我按下刷新按钮时，所有项目都位于Tab＆＃34; Kitchen＆＃34;，甚至是那些设计在＆＃34;睡眠室＆＃34;中的项目。后来当我点击＆＃34;睡觉室＆＃34;选项卡，只有一个项目 - 第一个（正确的一个，所以打算在＆＃34;睡眠室＆＃34;）。接下来当我点击＆＃34; Kitchen＆＃34;选项卡我将看到第一个项目，也是正确的一个项目，以便在＃34; Kitchen＆＃34;中。你知道为什么我会观察这种现象吗？如何纠正？

Answer 1

问题：

tab-pane应该等于nav-tabs中定义的标题页数，然后将内容放在tab-pane内nav-tabs
应该有一个有效的tab-pane

改进： - 您不需要在上下文中传递项目，您可以使用room.items.all直接在模板中访问会议室项目，只需在RoomList模型中为Item定义related_name

所以这是改进的代码：

{% 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)

Django + Bootstrap + nav-tabs错误显示

1 个答案: