Передача переменных шаблона Django в JavaScript в GAE - PullRequest
Новая
       5

Передача переменных шаблона Django в JavaScript в GAE

2 голосов
/ 14 ноября 2010

Я пытаюсь создать облако слов с образцом визуализации 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>

Я создаю {{datamade}} в своем файле main.py, затем передаю его как переменную шаблона:

   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, выполняемый до значения шаблона?Не уверен, как приспособиться к этому.Буду признателен за любой совет.

Отказ от ответственности: я новичок.

Спасибо!Джейк

Ответы [ 2 ]

1 голос
/ 14 ноября 2010

Я бы предложил внести ряд изменений в ваш код.Вместо генерации вызовов 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()

Так что вам просто нужно будет передать сгенерированный вами массив данных в DataTable Google.К счастью, это очень небольшое изменение в вашем шаблоне: 

<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

0 голосов
/ 14 ноября 2010

Джейк, кажется, что вы вставляете теги '1001 *' в свой код js. 'datamade' может быть:

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

Это не исполняемый файл js, потому что html-теги не читаются интерпретатором js. Вы фактически пишете неполное выражение сравнения (не что иное, как переменная с именем br). Не пытайтесь вставлять разрывы страниц в ваш код, а просто присоединяйтесь к пустой строке. datamade = ''.join(datamake)

Edit: Тем не менее, в общем случае не рекомендуется использовать цикл для вывода более 100 строк js. Вам лучше отправлять весь объект в js в формате json и потом зацикливать его на клиенте.

Я бы посоветовал это: 

<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,
    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...