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

我正在尝试使用 Google 的可视化示例创建词云:

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

我在我的 main.py 文件中创建 {{datamade}}，然后将其作为模板变量传递:

   tweets1 = [] 
 
    fetched = urlfetch.fetch("http://api.twitter.com/1/statuses/user_timeline.json?screen_name="+tweets.username+"&count=200") 
    statustext = json.loads(fetched.content) 
 
    for tweetInfo in statustext: 
     tweets1.append(tweetInfo["text"]) 
 
    datamake = [] 
 
    n = 1 
    for n in range(160): 
   tweet = tweets1[n] 
   datamake.append("data.setCell("+str(n)+", 0, '"+tweet+"');") 
 
    datamade = '<br>'.join(datamake) 
 
 
    content_values = { 
        'datamade':datamade, 
        'username':tweets.username, 
        } 

当我打印 {{datamade}} 时，我看到了正确的 Javascript 代码。当我将这些值硬编码到我的 statuspage.html 中时，javascript 会正确执行。但是，当我将变量直接传递给 javascript 时，javascript 无法正常执行。

我的 javascript 在传递模板值之前执行吗？不确定如何对此进行调整。我将不胜感激任何建议。

免责声明:我是个新手。

谢谢! jack

请您参考如下方法:

我建议对您的代码进行一些更改。生成表格并让 Google 的 DataTable 处理它，而不是生成 javascript 调用 (data.setCell)。

import os 
from google.appengine.ext import webapp 
from google.appengine.ext.webapp.util import run_wsgi_app 
from google.appengine.ext.webapp import template 
from google.appengine.api import urlfetch 
 
class GetTweetsHandler(webapp.RequestHandler): 
    def get(self): 
        user = self.request.get('user', 'someuser') 
        fetched = urlfetch.fetch("http://api.twitter.com/1/statuses/user_timeline.json" 
                                 "?screen_name=" + user + "&count=200") 
        tweets = json.loads(fetched.content) 
 
        data = {'cols': [{'type': 'string', 'label': 'Tweets'}], 
                'rows': [{'c': [{'v': tweet["text"]}]} for tweet in tweets]} 
 
        template_values = {'tweet_data': json.dumps(data), 
                           'user': user} 
        path = os.path.join(os.path.dirname(__file__), 'index.html') 
        self.response.out.write(template.render(path, template_values)) 
 
 
 def main(): 
   application = webapp.WSGIApplication([('/gettweets', GetTweetsHandler)], 
                                        debug=True) 
   run_wsgi_app(application) 
 
 if __name__ == '__main__': 
   main() 

那么您只需要将生成的数据表传递给 Google 的 DataTable。幸运的是，这是对您的模板的一个非常小的更改:

<html> 
<head> 
    <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> 
    <script type="text/javascript"> 
      google.load("visualization", "1"); 
      google.setOnLoadCallback(draw); 
      function draw() { 
        var tweet_data = {{tweet_data}}; 
        var data = new google.visualization.DataTable(tweet_data); 
        var outputDiv = document.getElementById('wcdiv'); 
        var wc = new WordCloud(outputDiv); 
        wc.draw(data, null); 
      } 
    </script> 
</head> 
<body> 
    <div id="wcdiv"></div> 
    <form method='get'> 
       <input type='text' name='user' value="{{user}}"></input> 
       <input type='submit'></input> 
    </form> 
</body> 
</html> 

通过访问 http://localhost:8080/gettweets/someuser 调用它