Djangoのブートストラップアコーディオン：オープンアコーディオンセクションのデータのみをロードするには？

Question

私はブートストラップアコーディオン（see here）のような形式でレシピを表示するウェブページを作ろうとしています。私はそうのように、このためにカスタムテンプレートタグを作った

<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件の以上のレシピやロードを持っているということですこのデータはすべて遅すぎます。理想的には、テンプレートタグ関数ingredients_in_recipeは、ユーザーがレシピをクリックしたときにのみ呼び出されるべきです。しかし、私が理解しているように、Djangoはそれをすべて実行してから、レンダリングされたHTMLをユーザーに送信するため、これは不可能です。

私はこの問題を回避することができますが、まだアコーデオンスタイルを絵のように維持していますか？事前に

おかげで、 マックス

EDIT：ここでは、テンプレートに到達する前にそのロジックを実行するだけでなく

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) 

Answer 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>