2011-05-01 104 views
2

我想建立一個菜單,我可以使用{%block%}標籤突出顯示一個鏈接。我在我的JavaScript是這樣的:附加jquery的Django模板標籤

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

在源,這是顯示爲「{%塊主頁%}」

我怎樣才能讓JQuery的不追加這個作爲一個字符串,但作爲模板標籤?

回答

4

你不能。至少在不向Django模板發出AJAX請求的情況下。在你的情況下,它會很慢,並提出不必要的額外要求。這是不值得的。您可以通過使用jQuery load函數通過jQuery從Django模板插入片段。但是你不能替換一個特定的{% block %}標籤,因爲在jQuery運行時,模板已經被處理了(並且對塊標籤的引用被移除了)。但是這不是你無論如何都應該這樣做的情況。

你爲什麼不用CSS類強調菜單?這是我平時解決這個問題:

  1. 創建一個在你templatetags文件夾的一個叫base_extras.py文件。如果您沒有,請在適當的文件夾中創建一個。
  2. 裏面base_extras.py,粘貼此代碼:

    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. 現在,在您的模板,在你的基本模板的菜單,做這樣的事情:

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

謝謝,我真的很喜歡這個解決方案。但它並不能真正解決我的問題。我應該更好地解釋一下。我從ajax請求中獲得菜單鏈接的名稱和目標。所以在我的for循環中,我想使用菜單鏈接的名稱作爲塊的名稱。我這樣做只是爲了好玩,所以我意識到這可能是一件非常愚蠢的事情。 – kimpettersen 2011-05-01 11:23:19

+0

@Pecock:這是不可能的,AFAIK。唯一的方法是將jQuery請求發送到另一個Django模板,並通過'id'或'class'或其他方法將返回的內容插入正確的位置。但是,您將無法添加新塊或使用jQuery在您的django代碼中更新舊塊。 – PeanutButterJelly 2011-05-01 11:30:16

+0

@Pecock:PBJ說什麼。 – 2011-05-01 11:32:02

1

你不能那樣做。在頁面被髮送到瀏覽器之前,Django模板標籤在服務器端被處理。另一方面,在從服務器接收到頁面之後,在瀏覽器中調用Javascript(包括jQuery)。

你可以做的是預渲染{% block %}標籤到JS變量的內容和jQuery的代碼中使用它:

var blockContent = "{% block Home %} ... {% endblock %}"; 
// ... 
$("#a-div").append(blockContent); 

如果你似乎在以表示需要多於一個街區(選擇你提供的代碼示例),你可以使用一系列的預渲染塊。

0

最好的辦法是創建一個代理視圖,它使得當前的AJAX請求成爲可能,處理JavaScript這樣的結果,然後返回您試圖從Django模板系統獲取的任何內容。

然後,而不是使您目前正在進行的AJAX調用,而是調用您自己的視圖。 Django在視圖中進行處理,您可以對返回到JavaScript的內容進行細化控制,並且它仍然只有一個(客戶端)服務器調用。