2011-10-30 102 views
1

問題:渲染項目不執行屬於thare模式的JS。Tempo.js:模板化JSON渲染引擎在渲染項目時不運行javascript

我們有HTML這樣的:

 <div id="tabs-fun" class="fun"> 
      <ol id="marx-brothers"> 
        <div data-template> <li class="file-{{is_public}}"> <p id="item-file-{{_tempo.index}}">{{file_name}} | {{modified}} | {{_tempo.index}} </p></li> 
        <script> 
         $('#item-file-{{_tempo.index}}').mouseup(function(){ 
          alert('hello!'); 
         }); 

        </script> 
        </div> 
        <li data-template-fallback>Sorry, JavaScript required!</li> 
      </ol> 
     </div> 

而且我們有這樣的JSON:

[ 
    { 
     "encoded_url": "893067edfcc310c7f32657b7faf314dcb472efe808ffa5a6560cbda2c1cba0e5.user.file", 
     "file_name": "Привет Мир.jpg", 
     "user_name": "[email protected]", 
     "modified": "2011-10-30 18:06:28", 
     "is_public": 0 
    }, 
    { 
     "encoded_url": "d1f2d21925d11931981e3bc0339d6a278e9bbd7ba9db6a96e45c9bbd9ecff0d9.user.file", 
     "file_name": "Привет Мир 2.jpg", 
     "user_name": "[email protected]", 
     "modified": "2011-10-30 18:06:48", 
     "is_public": 1 
    } 
] 

與JS可使其:

 <script type="text/javascript"> 
      $(document).ready(function() { 
       var twitter = Tempo.prepare('marx-brothers'); 
       twitter.starting(); 

       $.get("ufs.json", function(json) 
       { 
        var data = $.parseJSON(json); 
        twitter.render(data); 
       }); 
      }); 
     </script> 

而我們得到有效的HTML頁數:

<ol id="marx-brothers"> 

         <li data-template-fallback="" style="display: none; ">Sorry, JavaScript required!</li> 
       <div data-template=""> <li class="file-0"> <p id="item-file-0">Привет Мир.jpg | 2011-10-30 18:06:28 | 0 </p></li> 
         <script> 
          $('#item-file-0').mouseup(function(){ 
           alert('hello!'); 
          }); 

         </script> 
         </div><div data-template=""> <li class="file-1"> <p id="item-file-1">Привет Мир 2.jpg | 2011-10-30 18:06:48 | 1 </p></li> 
         <script> 
          $('#item-file-1').mouseup(function(){ 
           alert('hello!'); 
          }); 

         </script> 
         </div></ol> 

但是whan我們點擊物品我們什麼都沒收到。當然,警報不是我想要在鼠標上處理的JS - 我需要更復雜的東西,但是這個示例是關於模板和JS的一般使用,與Tempo

那麼 - 如何解決這個問題?

更新

演示這裏提出http://jsfiddle.net/79Y77/2/

+0

我注意到警報 '#項目文件 - {{_ tempo.index}}' 會提醒「#項目文件 - {{_速度。索引}}',但頁面上的js表示,alert('#item-file-0') – sissonb

回答

2

建議的方法是使用jQuery住()方法綁定事件處理程序由於產生每個元件,當這些不會被複制。見高級主題>綁定事件處理程序@http://tempojs.com/

這裏見例如:http://jsfiddle.net/zfJbp/1/

+2

更新了Tempo文檔,其示例如下:http://twigkit.github.com/tempo/#jquery –