Question

Django中的第一个计时器以及MVC中的任何一个计时器，所以请自己轻松学习，因为我现在正在学习它。

我有这个视图，左边有一个包含产品列表的菜单。菜单旁边是一个标签内容，应该包含产品的描述，图片和有用的链接（3个标签）。菜单中显示的所有信息以及选项卡内容都保存在数据库中，并通过模型访问。这是我的页面的粗略草稿：

我想要的是，当我点击左侧的产品时，正确的信息将被加载到标签内容中。

视图如下所示：

def details(request, clientName):
    client = Client.objects.get(clientName=clientName)
    products = Product.objects.filter(clientID=client.clientID)
    productTypes = Product.objects.filter(clientID=client.clientID).values_list('productType', flat=True)
    productDetails = ProductDetail.objects.get(productID=1)

    #Since there is no distinct in SQLite, I use this code to get all individual values of productType
    productTypeList = []
    for productType in productTypes:
        if productType not in productTypeList:
            productTypeList.append(productType)

    clientList = Client.objects.all()
    context = {
        'client': client,
        'products': products,
        'productDetails': productDetails,
        'productTypes': productTypeList,
        'clientList': clientList,
        'nav': 'products',
    }
    return render(request, 'prsales/details.html', context)

模板是：

{% load staticfiles %}
<!DOCTYPE html>
<html>
    <head>
        {% include "prsales/head.html" %}
        <br />
        <div class="text-center">
            <img src="{% static client.clientHeader %}">
        </div>
    </head>
    <body>
        <div class="col-lg-3">
            <div class="well sidebar-nav">
                <ul class="nav nav-list">
                    {% for productType in productTypes %}
                        <li class="nav-header">{{ productType }}</li>
                        {% for product in products %}
                            {% if product.productType == productType %}
                                <li><a href="#">{{ product.productName }}</a></li>
                            {% endif %}
                        {% endfor %}
                    {% endfor %}
                </ul>
            </div><!--/.well -->
        </div><!--/span-->
        <div class="col-lg-9">
            <ul class="nav nav-tabs nav-pills">
                <li role="presentation" class="active"><a href="#tab1" data-toggle="tab" aria-controls="tab1" role ="tab">Description</a></li>
                <li role="presentation"><a href="#tab2" data-toggle="tab" aria-controls="tab2" role ="tab">Gallery</a></li>
                <li role="presentation"><a href="#tab3" data-toggle="tab" aria-controls="tab3" role ="tab">Manuals</a></li>
            </ul>

            <div class="tab-content">
                <div role="tabpanel" class="tab-pane fade in active" id="tab1">
                    <div class="panel panel-jumbotron panel-default">
                        <div class="panel-body">
                            <h3>Product Name</h3>
                            <p>{{ productDetails.detail }}</p>
                        </div>
                    </div>
                </div>

                <div role="tabpanel" class="tab-pane fade" id="tab2">
                    <div class="panel panel-jumbotron panel-default">
                        <div class="panel-body">
                            <ul>
                                <li>TEST</li>
                                <li>TEST</li>
                                <li>TEST</li>
                                <li>TEST</li>
                            </ul>
                        </div>
                    </div>  
                </div>

                <div role="tabpanel" class="tab-pane fade" id="tab3">
                    <div class="panel panel-jumbotron panel-default">
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-lg-12">
                                    <h1 class="page-header">Thumbnail Gallery</h1>
                                </div>

                                <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                                    <a class="thumbnail" href="http://placehold.it/400x300" data-lightbox="mindray">
                                        <img class="img-responsive" src="http://placehold.it/400x300" alt="" >
                                    </a>
                                </div>

                                <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                                    <a class="thumbnail" href="http://placehold.it/400x300" data-lightbox="mindray">
                                        <img class="img-responsive" src="http://placehold.it/400x300" alt="">
                                    </a>
                                </div>

                                <div class="col-lg-3 col-md-4 col-xs-6 thumb">
                                    <a class="thumbnail" href="http://placehold.it/400x300" data-lightbox="mindray">
                                        <img class="img-responsive" src="http://placehold.it/400x300" alt="">
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>  
                </div>
            </div>
        </div>
    </body>
</html>

在标签内容中，您可以看到变量{{productDetails.detail}}，这是我想要更改的内容，具体取决于我在菜单上点击的内容。

我认为解决方案之一就是为每个产品制作标签内容，并在点击时显示和隐藏它们，但在我看来这是一个可怕的解决方案。我只想要一个标签内容，并在点击时动态更改内容。

同样，我是新手，所以对你提出的任何建议都非常受欢迎。

Answer 1

我建议您使用AJAX代替经典渲染。例如：

添加数据密钥属性以存储产品代码。

{% for product in products %}
  {% if product.productType == productType %}
    <li>
      <a data-key={{product.code}} href="#" onClick="onProductClicked(this)">
          {{ product.productName }}
      </a>
    </li>
    {% endif %}
{% endfor %}

然后，当您点击某个产品时，请获取该代码并向API发出ajax请求以检索其产品数据。

onClickedProduct(product) {
  const productKey = $(product).getAttribute('data-key');
  $.get(`/api/products/${productKey}`, function(product) {
    loadProductDescription(product.description);
    loadProductGallery(product.gallery);
    loadProductManual(product.manual);
  });
}

function loadProductDescription(description) {
  $('#product-name').text(description.name);
  $('#product-detail').text(description.detail);
}

function loadProductManual(manual) {
  $(manual).each(function(index) {
    $('#tab2 li').eq(index).text($(this));
  });
}

function loadProductGallery(gallery) {
  $(gallery).each(function(index) {
    $('#tab3 img').eq(index).src = 
        `data:image/png;base64,${$(this)}`;
  });
}

/ api / products /：productKey 是后端API的路径，用于通过该代码获取产品。

点击

1 个答案: