title: Tempo.js: templated JSON rendering engine does not run javascript when renders items
body: <p>Problem: rendered items do not execute JS that was part of thare templete.</p>
  
  <p>We had HTML like this:</p>
  
  <pre><code>        &lt;div id="tabs-fun" class="fun"&gt;
              &lt;ol id="marx-brothers"&gt;
                    &lt;div data-template&gt; &lt;li class="file-{{is_public}}"&gt; &lt;p id="item-file-{{_tempo.index}}"&gt;{{file_name}} | {{modified}} | {{_tempo.index}} &lt;/p&gt;&lt;/li&gt;
                    &lt;script&gt;
                          $('#item-file-{{_tempo.index}}').mouseup(function(){
                              alert('hello!');
                          });
  
                    &lt;/script&gt;
                    &lt;/div&gt;
                    &lt;li data-template-fallback&gt;Sorry, JavaScript required!&lt;/li&gt;
              &lt;/ol&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>And we had a JSON like this:</p>
  
  <pre><code>[
      {
          "encoded_url": "893067edfcc310c7f32657b7faf314dcb472efe808ffa5a6560cbda2c1cba0e5.user.file",
          "file_name": "Привет Мир.jpg",
          "user_name": "jdfg@mail.ru",
          "modified": "2011-10-30 18:06:28",
          "is_public": 0
      },
      {
          "encoded_url": "d1f2d21925d11931981e3bc0339d6a278e9bbd7ba9db6a96e45c9bbd9ecff0d9.user.file",
          "file_name": "Привет Мир 2.jpg",
          "user_name": "jdfg@mail.ru",
          "modified": "2011-10-30 18:06:48",
          "is_public": 1
      }
  ]
  </code></pre>
  
  <p>with JS that renders it:</p>
  
  <pre><code>        &lt;script type="text/javascript"&gt;
              $(document).ready(function() {
                  var twitter = Tempo.prepare('marx-brothers');
                  twitter.starting();
  
                   $.get("ufs.json", function(json)
                   {
                      var data = $.parseJSON( json );
                      twitter.render(data);
                  });
              });
          &lt;/script&gt;
  </code></pre>
  
  <p>And we got valid HTML on page:</p>
  
  <pre><code>&lt;ol id="marx-brothers"&gt;
  
                        &lt;li data-template-fallback="" style="display: none; "&gt;Sorry, JavaScript required!&lt;/li&gt;
                  &lt;div data-template=""&gt; &lt;li class="file-0"&gt; &lt;p id="item-file-0"&gt;Привет Мир.jpg | 2011-10-30 18:06:28 | 0 &lt;/p&gt;&lt;/li&gt;
                        &lt;script&gt;
                              $('#item-file-0').mouseup(function(){
                                  alert('hello!');
                              });
  
                        &lt;/script&gt;
                        &lt;/div&gt;&lt;div data-template=""&gt; &lt;li class="file-1"&gt; &lt;p id="item-file-1"&gt;Привет Мир 2.jpg | 2011-10-30 18:06:48 | 1 &lt;/p&gt;&lt;/li&gt;
                        &lt;script&gt;
                              $('#item-file-1').mouseup(function(){
                                  alert('hello!');
                              });
  
                        &lt;/script&gt;
                        &lt;/div&gt;&lt;/ol&gt;
  </code></pre>
  
  <p>But whan we click on items we do not get anything. Ofcourse alert is not the JS I want to handle on mouse up - I need more complex stuff but this sample is about general use of templates and JS with <a href="http://twigkit.github.com/tempo/#jquery" rel="nofollow">Tempo</a>.</p>
  
  <p>So - how to get around this issue?</p>
  
  <h1>Update</h1>
  
  <p>Demo presented here <a href="http://jsfiddle.net/79Y77/2/" rel="nofollow">http://jsfiddle.net/79Y77/2/</a></p>