在GAE中将Django模板变量传递到javascript中

Question

我试图用谷歌的可视化示例创建一个词云：

<link rel="stylesheet" type="text/css" href="http://visapi-gadgets.googlecode.com/svn/trunk/wordcloud/wc.css"/>
<script type="text/javascript" src="http://visapi-gadgets.googlecode.com/svn/trunk/wordcloud/wc.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>


<div id="wcdiv"></div>
<script type="text/javascript">
  google.load("visualization", "1");
  google.setOnLoadCallback(draw);
  function draw() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Text1');
    data.addRows(160);
 {{datamade}}
    var outputDiv = document.getElementById('wcdiv');
    var wc = new WordCloud(outputDiv);
    wc.draw(data, null);
  }
</script>

我正在我的主.py文件，然后将其作为模板变量传递：

^{pr2}$

当我打印{datamaked}}时，我看到了正确的Javascript代码。当我把这些值硬编码到状态页.html，javascript正确执行。但是当我将变量直接传递到javascript中时，javascript不能正确执行。在

我的javascript是在模板值被传递之前执行的吗？不知道该如何调整。如果有什么建议，我将不胜感激。在

免责声明：我完全是个新手。在

谢谢你！ 杰克

Answer 1

你好像把标签放进你的手边了datamade'可以是：

data.setCell('foo', 0, 'bar');<br>data.setCell('foo', 0, 'bar');

这不是可执行的js，因为js解释器无法读取html标记。实际上，您正在编写一个不完整的比较表达式（没有比一个名为br的变量小的东西）。不必费心在代码中插入分页符，只需在空字符串上联接即可。datamade = ''.join(datamake)

编辑： 不过，一般来说，使用循环打印出100多行js并不是一个好的实践。最好将整个对象以json格式发送到js，然后在客户机中循环。在

我建议：

<link rel="stylesheet" type="text/css" href="http://visapi-gadgets.googlecode.com/svn/trunk/wordcloud/wc.css"/>
<script type="text/javascript" src="http://visapi-gadgets.googlecode.com/svn/trunk/wordcloud/wc.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>


<div id="wcdiv"></div>
<script type="text/javascript">
  google.load("visualization", "1");
  google.setOnLoadCallback(draw);
  function draw() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Text1');
    data.addRows(160);
    var tweets = {{tweets}};

    for (var i in tweets) {
       data.setCell(i, 0, tweets[i]);
    }

    var outputDiv = document.getElementById('wcdiv');
    var wc = new WordCloud(outputDiv);
    wc.draw(data, null);
  }
</script>

服务器文件是否显示以下内容：

^{pr2}$