jQuery + jTemplatesを使って、setIntervalで定期的に新しいデータを取得し、要素の上に追加していく方法 -

はまったので忘れないうちにメモ。

$("#piyopiyo”).processTemplate(data) とかやると、id="piyopiyo"な要素の内容が全部置き換わってしまうので、古いデータが消えてしまう。たとえばTwitterクライアントみたいなものを作ろうと思ったら、定期的に新しいtimelineをとってきたら、古いデータを残しつつ、新しいものだけ上に出てきてほしい。

以下のようにすることで、id="piyo"配下のclass="moge"にデータがたまっていく。空のdivを一個用意して、そこにprocessTemplateで新しいデータを入れていく。@hideaki_t、ありがとうございました。

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="js/jquery-jtemplates.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
      hoge.count=1;
      $("#piyo > .moge > div:first").setTemplate("{#foreach $T as r}<div class='hogera'>{$T.r.id}</div>{#/for}");
      hoge.show();
      window.setInterval(function(){
        hoge.show();
      }, 5000);
    });
    var hoge = {
      show:function() {
        var data = "[{id:" + hoge.count++ + "}]";
        var t = $("#piyo > .moge > div:first");
        t.after(t.children());
        t.processTemplate(eval(data));
      }
    }
    </script>
  </head>
  <body>
    <div id="piyo"><div class="moge"><div /></div></div>
  </body>
</html>