3

ブートストラップ アコーディオンのような形式でレシピを表示する Web ページを作成しようとしています (こちらを参照)。これは私が今やっている方法です：

<div class="panel-group" id="accordion">
    {% for recipe in recipes %}
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse{{ forloop.counter }}">
                    {{ recipe }}
                </a>
            </h4>
        </div>
        <div id="collapse{{ forloop.counter }}" class="panel-collapse collapse">
            <div class="panel-body">
                <table class="table table-hover">
                    {% for ingredient in  foodtype|ingredients_in_recipe:recipe %}
                        <tr>
                            <td>
                                {{ ingredient.ingredient_name }}
                            </td>
                            <td>
                                {{ ingredient.ingredient_quantity }}
                            </td>
                        </tr>
                    {% endfor %}
                    <p>{{ recipe.details }}</p>
                </table>
            </div>
        </div>
    </div>
    {% endfor %}
</div>

このためのカスタム テンプレート タグを次のように作成しました。

@register.filter
def ingredients_in_recipe(foodtype, recipe):
    return foodtype.ingredient_set.filter(recipe=recipe).order_by("ingredient_name")

問題は、200 以上のレシピがあり、このすべてのデータの読み込みが遅すぎることです。理想的には、ユーザーがレシピをクリックしたときにのみ、テンプレート タグ関数の materials_in_recipe を呼び出す必要があります。ただし、私の理解では、Django がすべて実行し、レンダリングされた HTML をユーザーに送信するため、これは不可能です。

写真のようにアコーディオン スタイルを維持しながら、この問題を回避できる方法はありますか?

前もってありがとう、マックス

編集：これも私の見解です

def detail(request, foodtype_id):
     foodtype = get_object_or_404(foodtype, id=foodtype_id)
     recipe = foodtype.recipe_set.values_list('recipe').order_by('recipe').distinct()
     context = {
         'foodtype': foodtype,
         'recipe': recipe,
     }
     return render(request, 'main/detail.html', context)
4

1 に答える 1

1

テンプレートに到達する前に、そのロジックを実行することを常にお勧めします。テンプレートで食材を注文する必要がないように、食材に順番を設定するとどうなりますか? それは機能し、パフォーマンスを向上させますか？

class Ingredient(models.Model):
  ...

  class Meta:
    ordering = ['ingredient_name']


<div class="panel-group" id="accordion">
    {% for recipe in recipes %}
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse{{ forloop.counter }}">
                    {{ recipe }}
                </a>
            </h4>
        </div>
        <div id="collapse{{ forloop.counter }}" class="panel-collapse collapse">
            <div class="panel-body">
                <table class="table table-hover">
                    {% for ingredient in recipe.ingredient_set.all %}
                        <tr>
                            <td>
                                {{ ingredient.ingredient_name }}
                            </td>
                            <td>
                                {{ ingredient.ingredient_quantity }}
                            </td>
                        </tr>
                    {% endfor %}
                    <p>{{ recipe.details }}</p>
                </table>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
于 2016-10-17T03:15:35.933 に答える