Pytter ビュー - When it’s ready.

モデルも出来て、コントローラでデータを保存する所まで出来たので後は、表示する部分を作る。どっちがめんどくさいか分からないけど、ページ遷移すると訳が分からなくなってしまう性分なので、Ajax使って必要なデータだけを表示するページに送る事にする。自前APIのレスポンスはJson形式とした。また、JavaScriptはjQueryを使わせてもらうことにした。理由は特にない。ドキュメントが多そうだからかな？

必要そうな事、テンプレートのHTML追加と、コントローラのViewsにメソッドを追加して、それらを結ぶUrlsにも記述を追加する。

追加物メソッド

ajax_pub_update: タイムラインを取得してTwitモデルに保存する。
ajax_get_pub: データベースから、Twitモデルを新しい日付順に指定数だけJsonで返す。

追加テンプレート

one_top.html: アップデートボタンと、取得数のフォーム、表示領域を持つ

Pytter/one/Views.py

# 指定数のTwitモデルをあたらし日付順で返す
def ajax_get_pub(request):
   postData = request.GET.copy()
   NoTwit = postData['NumOfTwit']
   data = serializers.serialize('json', Twit.objects.all().order_by('-created_at')[:NoTwit])
   return HttpResponse(data, mimetype=pytter_mimetype)

# ajax 呼び出し用アップデートメソッド　成功したらokを返す。
def ajax_pub_update(request):
  getPubTwitter()
  #getFriendTimeline()
  p = 'ok'
  return HttpResponse(p, mimetype=pytter_mimetype)

one/template/one_top.html

{% extends "base.html" %}
{% block title %}　{{ title }}　{% endblock %}
{% block contents %}
  {{title}}<br>
  <input type="text" id="getNumOfTwit" value='20'></textarea><br>
  <input type="button" value="最新のDB" onClick="jQueryAjax();"> <input type="button" value="アップデート" onClick="jQueryAjaxUpdate();"><div id='update_status'></div>
  <hr>
{% endblock %}

 <script language="javascript" src="/site/js/jquery-latest.js" type="text/javascript"></script>

 <script><!--
   
   function jQueryAjax() {
     var NumOfT = $('#getNumOfTwit').attr('value');
     $.get('/Pytter/ajax_get_pub/', {'NumOfTwit':NumOfT}, jQueryRequest);
   }
   
   function jQueryAjaxUpdate() {
     var NumOfT = $('#getNumOfTwit').attr('value');
     $.get('/Pytter/ajax_pub_update/',{},jQueryAjax);
   }
   function jQueryRequest(message, status) {
     var twitAll = eval(message);
     var allTwit = '';
     for(var ii=0; ii<twitAll.length; ii++){
       var twitTxt = '';
       var oneTwit = '';
       oneTwit+="<div class='one_twit'><div class='twit_head'>"+twitAll[ii].fields.usr_id+" : ";
       oneTwit+=twitAll[ii].fields.usr_name+"/";
       oneTwit+=twitAll[ii].fields.usr_screen+" : ";
       oneTwit+=twitAll[ii].fields.created_at+"</div>";
       twitTxt+="<div class='twit_text'>"+twitAll[ii].fields.text+"</div></div>";
       allTwit+=oneTwit+twitTxt;
     }
     $("div#testDIV").html(allTwit);
   }
   
   //--></script>

{% endblock %}


{% block css %}
.one_twit{
  background:#fff;
  float:center;
  width:700px;
  margin:10px auto 0;
  padding:0px;
  border-style:solid;
  border-width: 1px 2px 2px 1px;
  border-color: #999;
}
.twit_head{
  background:#ccc;
  margin:0px auto 0;
  padding:3px;
}
.twit_text{
  background:#eee;
  float:center;
  margin:0px auto 0;
  padding: 4px 10px 4px 10px;
}

また、上記テンプレートは、base.htmlを拡張した為以下も必要

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <title>{% block title %}Untitled{% endblock %}</title>
  {% block js %} {% endblock %}
<style type="text/css">
{% block css %}{% endblock %}
</style>
</head>

<body >
{% block contents %}hello world.{% endblock %}

</body>
</html>