Django template for 标签 结合使用字典，javascript

• 介绍
  本文主要介绍在Django template里如何使用字典，并且结合着javascript使用，可以更加高效的开发前端页面。
• 背景：
  以前编写Django template的时候，javascript都是单独编写的，通常要查好多资料才能实现比较复杂的功能，最近开发的一个前端页面里包涵SVG图像，所以感觉完全用jQuery来解决需求有点麻烦，就突然意识到既然Django template tag 可以动态的渲染页面，那么是不是可以动态的渲染javascript，查了一下发现可以。然后就实践了一下，Django template tag 的用法可以结合javascript使用，感觉挺好用的，虽然在前端显示看着有些傻逼，但是真正编程的话感觉很高效。
• 代码示例

<script type="text/javascript">                $(document).ready(function(){                    {%for cage in cage_list %}                            var cagename='{{cage.cagename}}';                            $("#"+cagename+" g[class='position-space'] > rect").attr('style','fill:'+'green'+';');                            {%for rack in rack_list|get_item:cage.cagename %}                                {% if rack.type == 'Network' %}                                    $("#{{cage.cagename}} g[data-name='{{rack.position}}'] > rect ").attr('style','fill:#ffffff;');                                {% endif %}                                {% if rack.status == False %}                                    $("#{{cage.cagename}} g[data-name='{{rack.position}}'] > rect").attr('style','fill:red');                                {% endif %}                            {%endfor%}                    {%endfor%}                  popover_focus_info();            })

需要注意的是其中{%for rack in rack_list|get_item:cage.cagename %} 的get_item是我自己定一个tag标签，Django自带的标签对于字典形式的数据支持不太好，查了一些资料发现很久之前就有人就有人提交相关的tag解决方法，但是不知道什么原因一只没有采用。get_item的构造如下

#custom_tagfrom django.template.defaulttags import [e-mail] get_item(dictionary, key):    return dictionary.get(key)

• 搞笑的前端效果代码

$(document).ready(function(){                var cagename='5-1';                $("#"+cagename+" g[class='position-space'] > rect").attr('style','fill:'+'green'+';');                $("#5-1 g[data-name='3116'] > rect").attr('style','fill:red');                $("#5-1 g[data-name='N1'] > rect ").attr('style','fill:#ffffff;');               var cagename='5-2';              $("#"+cagename+" g[class='position-space'] > rect").attr('style','fill:'+'green'+';');              var cagename='6-1';              $("#"+cagename+" g[class='position-space'] > rect").attr('style','fill:'+'green'+';');                 $("#6-1 g[data-name='N1'] > rect ").attr('style','fill:#ffffff;');                  popover_focus_info();            })

请忽略混乱的格式，从上面的代码我门可以开出来，Django的template只是将代码的简单翻译，并不能实现比较酷炫的功能实现，当条目比较多的时候。你就会看到满屏都是重复功能多javascript代码，所以直接看前端代码会觉的这个写前端的有些傻逼，但是如果你是pythoner，你就应该知道其实他后端是使用这样的机制，这样的用法的有些优缺点：
如果你对前端语言不太熟悉的话，可能会减轻你的痛苦，并且用自己最熟悉的语言开发真的会很高效。
缺点：
最后前端的代码不够优美，对于python的理念有些不同，还有就是用翻译过来的javascript的语法，运行速度是否受影响有待考察？