【问题标题】:Append Django template tag with Jquery使用 Jquery 附加 Django 模板标签
【发布时间】:2011-08-16 09:40:06
【问题描述】:

我想构建一个菜单,我可以在其中设置一个使用 {% block %} 标签突出显示的链接。我的 Javascript 中有这样的内容:

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

在源码中,这显示为“{% block Home %}”

如何让 JQuery 不将其作为字符串附加,而是作为模板标签附加?

【问题讨论】:

    标签: javascript jquery django django-templates


    【解决方案1】:

    你不能。至少在没有向 Django 模板发出 AJAX 请求的情况下是这样。在您的情况下,它会很慢并且会提出不必要的额外请求。这不值得。您可以使用例如 jQuery load 函数通过 jQuery 从 Django 模板插入 sn-ps。但是你不能替换特定的{% 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
    

    【讨论】:

    • 谢谢,我真的很喜欢这个解决方案。但这并不能真正解决我的问题。我可能应该解释得更好一点。我从 ajax 请求中获取菜单链接的名称和目标。所以在我的 for 循环中,我想使用菜单链接的名称作为块的名称。我这样做只是为了好玩,所以我知道这可能是一件非常愚蠢的事情。
    • @Pecock:不幸的是,这是不可能的,AFAIK。唯一的方法是向另一个 Django 模板发出 jQuery 请求,并通过idclass 或其他任何方式将返回的内容插入正确的位置。但是您将无法使用 jQuery 在 django 代码中添加新块或更新旧块。
    • 好吧,谢谢大家。我找到了一个解决方案,但它很糟糕。我刚刚从模板中传递了一个“active_menu”变量并将其存储在一个隐藏字段中。然后在菜单中进行比较。下次我一定会以更好的方式做到这一点
    【解决方案2】:

    你不能那样做。 Django 模板标签在服务器端处理,甚至在页面发送到浏览器之前。另一方面,在从服务器接收到页面之后,在浏览器中调用 Javascript(包括 jQuery)。

    你可以做的是将{% block %}标签的内容预渲染到JS变量并在jQuery代码中使用:

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

    如果您需要从多个块中进行选择(正如您在提供的代码示例中所指出的那样),您可以使用一组预渲染块。

    【讨论】:

      【解决方案3】:

      最好的办法是创建一个代理视图,该视图发出当前的 AJAX 请求,像 javascript 一样处理结果,然后返回您试图从 Django 模板系统获取的任何内容。

      然后,您可以调用自己的视图,而不是当前进行的 AJAX 调用。 Django 在视图中按照应有的方式进行处理,您可以对返回到 javascript 的内容进行细粒度控制,而且它仍然只是一个(客户端)服务器调用。

      【讨论】:

        猜你喜欢
        • 2011-04-06
        • 2016-09-02
        • 2011-08-25
        • 2014-03-20
        • 2011-04-30
        • 2011-06-15
        • 1970-01-01
        • 2013-08-04
        相关资源
        最近更新 更多