Real Beat » javascript http://nobu666.com Keep drinking, Keep listening to music, Go fuck yourself Thu, 19 Jan 2012 04:57:28 +0000 ja hourly 1 http://wordpress.org/?v=3.1.2 jQuery + jTemplatesを使って、setIntervalで定期的に新しいデータを取得し、要素の上に追加していく方法 http://nobu666.com/2009/11/22/793.html http://nobu666.com/2009/11/22/793.html#comments Sun, 22 Nov 2009 08:43:39 +0000 nobu http://nobu666.com/?p=793 Read more »

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

$(“#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>
]]> http://nobu666.com/2009/11/22/793.html/feed 0