Django模板不执行js函数答案

【问题标题】：Django template not executing js functionDjango模板不执行js函数
【发布时间】：2011-11-05 07:07:15
【问题描述】：

我有一个看起来像这样的 django 模板：

<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script src="{{ STATIC_URL }}js/jquery.flot.js"></script>
<!--<script src="c:/src/project/scraper/collegedata/templates/chart.js" type="text/javascript"></script>-->
<script src="{{ STATIC_URL }}js/chart.js" type="text/javascript"></script>

</head>

<body>

    <div id="chart1" style="width:600px;height:300px"></div>


    <script>
       show_graph("{{ chart_type }}", {{ series_names }}, {{ data }}, {{ answer }});
    </script>

    <form action="start">
        <input type="submit" value="Back to Questions" />
    </form>

</body>

</html>

其中 show_graph 是 chart.js 中的一个函数。但是，pycharm 给了我以下两个错误之一：未解析的函数或方法 show_graph()，或传递的参数数量无效：预期 4

而且该函数显然没有被调用。

我有点困惑，我什至是否可以将模板变量传递给 js 函数...

有人有什么见解吗？

编辑：

这会生成

<html xmlns="http://www.w3.org/1999/xhtml"><head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"   type="text/javascript"></script>
<script src="/static/js/jquery.flot.js"></script>
<!--<script src="c:/src/project/scraper/collegedata/templates/chart.js" type="text/javascript"></script>-->
<script src="/static/js/chart.js" type="text/javascript"></script>

</head>

<body>

    <div id="chart1" style="width: 600px; height: 300px;"></div>


    <script>
       show_graph("pie", [&lt;ResponseOption: puddentane&gt;, &lt;ResponseOption: down the lane&gt;], [1, 0], 0);
    </script>

    <form action="start">
        <input value="Back to Questions" type="submit">
    </form>

</body></html>

chart.js 的样子（值临时硬编码以进行故障排除，应该提到 $.plot 也给出了未解决的函数错误）：

function show_graph(charttype, series_names, data, answer_index){

    var data = [2000, 50, 400, 200, 5000];

    var data3 = [
    { label: "my cat",  data: 10, color: 'rgb(85, 96, 42)'},
    { label: "my friends",  data: 20, color: 'rgb(105, 118, 52)'},
    { label: "my boyfriend",  data: 30, color: 'rgb(125, 141, 62)'},
    { label: "my job",  data: 30, color: '#42215F'},
    { label: "food",  data: 10, color: 'rgb(145, 164, 72)'},
    { label: "social skills",  data: 0, color: 'rgb(166, 189, 82)'}
];

    alert("in chart.js");

    var charttype = "pie";

    var type = {};
    type[charttype] = {show: true};

    var chart_options = {};
    chart_options["series"]=type;

    var plot = $.plot($("#chart1"), data3, chart_options);
}

【问题讨论】：

这段代码生成的标记是什么样的？（在浏览器中查看源代码）
第二次需要显示源代码 - 具体来说，粘贴生成的 show_graph 行。

标签： javascript django templates function parameters

【解决方案1】：

看起来 series_names 只是作为对象的 HTML 实体输出，而没有适当的 __unicode__ 方法。你得到：

show_graph("pie", [&lt;ResponseOption: puddentane&gt;,

解码后是：

show_graph("pie", [<ResponseOption: puddentane>, ...

实际上需要传递给方法的是什么？您可能需要考虑如何输出{{ series_names }}，而不仅仅是调用该变量的字符串表示形式。您目前生成的是无效的 Javascript - 您的浏览器控制台可能会加强这一点。

【讨论】：

我稍后会解决这个问题，谢谢。但是，目前，我实际上并没有使用 series_names——我已经硬编码了这些值，但它仍然无法正常工作
这无关紧要。 [&lt;ResponseOption: puddentane&gt;, 和 [<ResponseOption: puddentane>, 都是无效的 JavaScript，不应该存在。如果您不使用它们，请将{{ series_names }} 替换为[]。
Sam 和 Mike 是赢家：无效的 javascript 阻止了代码运行。谢谢！

【解决方案2】：

参数数量无效意味着您的上下文变量之一（可能是answer）为空白。

您的代码是有风险的，因为 Django 会将您的上下文变量转义为 HTML 安全，而不是 JavaScript 安全。我用来解决这个问题的一个技巧是将所有参数放入字典中的 JS 函数，然后将其转换为 JSON 并将其用于上下文变量（将其与 |safe 过滤器和 <![CDATA[ 标记一起使用如果需要，在模板中）。

至于show_chart 未被解析，您可能需要确保chart.js 确实正在加载，并且它不在某种形式的命名空间中。

【讨论】：

我将如何检查chart.js 是否真的被加载了？这很可能是这里的问题。
在浏览器中使用调试工具。在 Firefox 中，安装 Firebug 并将其打开。在 Safari 中，启用首选项中的开发人员菜单。有一个资源选项卡或等效选项卡，显示为页面加载的每个内容和任何状态代码。