2011-05-01 6 views
2

{% block %} 태그를 사용하여 강조 표시된 하나의 링크를 설정할 수있는 메뉴를 만들고 싶습니다. 내 자바 스크립트에서 이런 일이 : 이것은 "{% 블록 홈 %}"로 표시됩니다, 소스에서Jquery로 Django 템플릿 태그 추가하기

<loop> 
$('#a-div').append('{% block ' + variable + ' %} <a href...</a> {% endblock %}') 
<endloop> 

나는 JQuery와 문자열로하지만 같은이 추가하지 만들 수있는 방법

템플릿 태그?

답변

4

수 없습니다. Django 템플릿에 AJAX 요청을하지 않고 적어도. 귀하의 경우, 그것은 느리고 불필요한 추가 요청을합니다. 그만한 가치는 없습니다. 예를 들어, jQuery load 함수를 사용하여 장고 템플릿의 스 니펫을 jQuery를 통해 삽입 할 수 있습니다. 그러나 특정 {% block %} 태그를 바꿀 수는 없습니다. jQuery가 실행될 때까지 템플릿이 이미 처리되었고 (차단 태그에 대한 참조가 제거 되었기 때문입니다). 그러나 이것은 어떤 경우에도 그렇게해야하는 상황이 아닙니다.

왜 CSS 클래스로 메뉴를 강조 표시하지 않으시겠습니까?

  1. templatetags 폴더 중 하나에 base_extras.py라는 파일을 만듭니다 여기에이 문제에 대한 나의 일반적인 솔루션입니다. 가지고 있지 않은 경우 적절한 폴더에 폴더를 만듭니다.

    <ul class="menu"> 
        <li class="home {% navactive request 'home' %}"><a href="{% url home %}">Home</a></li> 
        <li class="contact {% navactive request 'contact' %}"><a href="{% url contact %}">Contact</a></li> 
        <li class="signup {% navactive request 'signup' %}"><a href="{% url signup %}">Sign up</a></li> 
    </ul> 
    
  2. 이 있는지 확인합니다 : 같은 것을 할, 당신의 기본 템플릿에 메뉴에, 템플릿에 지금

    from django import template 
    from django.core.urlresolvers import reverse 
    
    register = template.Library() 
    
    @register.simple_tag 
    def navactive(request, urls): 
        if request.path in (reverse(url) for url in urls.split()): 
         return "active" 
        return "" 
    
  3. : base_extras.py 내부

  4. ,이 코드를 붙여 넣습니다 귀하의 현재 URL이있는 메뉴는 active 클래스입니다. 그런 다음 CSS에서 active이라는 메뉴 항목에 대한 특수 클래스를 추가하여 다른 메뉴와 약간 다르게 표시하면됩니다.

    ul.menu li.active {background: red; color: white;} 
    

그리고 당신은 jQuery로 활성 메뉴를 변경해야 할 일이 있다면, 당신은 모든 메뉴의 active 클래스를 제거하고 새로 선택한 메뉴에 추가 할 수 있습니다 :

$('ul.menu li').removeClass('active').find('.home').addClass('active'); // for example 
+0

감사합니다. 정말이 솔루션이 마음에 들었습니다. 하지만 그것은 내 문제를 해결하지 못합니다. 아마도 조금 더 잘 설명해야합니다. 나는 아약스 요청으로부터 메뉴 링크의 이름과 타겟을 얻는다. 그래서 for 루프에서 나는 메뉴 링크의 이름을 블록의 이름으로 사용하고 싶다. 나는이 일을 단지 재미로하고 있기 때문에 이것이 매우 어리석은 일이라는 것을 알고 있습니다. – kimpettersen

+0

@Pecock : 안타깝게도 불가능합니다, AFAIK. 유일한 방법은 다른 장고 템플릿에 대한 jQuery 요청을 만들고, 반환 된 내용을'id' 나'class' 등으로 올바른 위치에 삽입하는 것입니다. 하지만 jQuery로 장고 코드에 새로운 블록을 추가하거나 오래된 블록을 업데이트 할 수는 없습니다. – PeanutButterJelly

+0

@Pecock : PBJ가 말한 바. –

1

그렇게 할 수는 없습니다. Django 템플릿 태그는 페이지가 브라우저로 전송되기 전에 서버 측에서 처리됩니다. 반면에 Javascript (jQuery 포함)는 서버에서 페이지를받은 후 브라우저에서 호출됩니다.

당신이 할 수있는 것은 JS 변수에 {% block %} 태그의 내용을 미리 렌더링하고 jQuery 코드에서 사용 :

당신이에 표시하는 것 당신이 (선택할 수있는 하나 개 이상의 블록을해야하는 경우
var blockContent = "{% block Home %} ... {% endblock %}"; 
// ... 
$("#a-div").append(blockContent); 

코드 샘플)을 사용하면 사전 렌더링 된 블록 배열에 의존 할 수 있습니다.

0

가장 좋은 방법은 현재 AJAX 요청을 처리하고 자바 스크립트처럼 결과를 처리 한 다음 장고 템플릿 시스템에서 얻으려는 모든 것을 반환하는 프록시보기를 만드는 것입니다.

그러면 현재 작성중인 AJAX 호출 대신 자신의보기를 호출합니다. Django는 자바 스크립트로 반환되는 것을 세밀하게 제어해야하며, 여전히 하나의 (클라이언트 측) 서버 호출 인 것처럼 뷰에서 처리를 수행합니다.

관련 문제