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는 사용자가 래서 피를 클릭 할 때만 호출되어야합니다. 그러나 장고는이 모든 것을 실행하여 렌더링 된 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) 

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>