[英]Passing Django template variables into javascript in GAE
我正在嘗試使用Google的可視化示例創建wordcloud:
<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在模板值傳遞之前執行的嗎? 不確定如何對此進行調整。 我將不勝感激任何建議。
免責聲明:我是新手。
謝謝! 可靠的人
我建議對您的代碼進行一些更改。 不用生成JavaScript調用(data.setCell),而是生成表並讓Google的DataTable
處理它。
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
傑克(Jake),看來您正在將'<br>'標簽放入js代碼中。 “數據制作”可能是:
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>
並讓您的服務器文件顯示以下內容:
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"])
tweetsJson = json.dumps(tweets1)
content_values = {
'tweets':tweetsJson,
'username':tweets.username,
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.