如何使用Tempo.js來做JSON模板？

我正在嘗試使用Tempo.js模板化，文檔很稀疏。請嘗試在SO中完成，而不是jsFiddle。如何使用Tempo.js來做JSON模板？

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 
    <head> 

      <script type="text/javascript" src="https://raw.github.com/twigkit/tempo/master/tempo.min.js"></script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 


     <script type="text/javascript" charset="utf-8"> 

      var data = [ 
        {'name':{'first':'Leonard','last':'Marx'},'nickname':'Chico','born':'March 21, 1887','actor': true,'solo_endeavours':[{'title':'Papa Romani'}]}, 
        {'name':{'first':'Adolph','last':'Marx'},'nickname':'Harpo','born':'November 23, 1888','actor':true,'solo_endeavours':[{'title':'Too Many Kisses','rating':'favourite'},{'title':'Stage Door Canteen'}]}, 
        {'name':{'first':'Julius Henry','last':'Marx'},'nickname':'Groucho','born': 'October 2, 1890','actor':true,'solo_endeavours':[{'title':'Copacabana'},{'title':'Mr. Music','rating':'favourite'},{'title':'Double Dynamite'}]}, 
        {'name':{'first':'Milton','last':'Marx'},'nickname':'Gummo','born':'October 23, 1892'}, 
        {'name':{'first':'Herbert','last':'Marx'},'nickname':'Zeppo','born':'February 25, 1901','actor':true,'solo_endeavours':[{'title':'A Kiss in the Dark'}]} 
       ]; 

      Tempo.prepare('marx-brothers').render(data); 

     </script>  

    </head> 
    <body> 

    <ol id="marx-brothers"> 
     <li data-template>{{nickname}} {{name.last}}</li> 
    </ol> 

    </body> 
</html>

來源

2013-02-13 Merlin

你試圖運行它引用已加載ID的DOM之前Tempo.prepare電話。

要麼將腳本標記放在</body>結束標記之前，要麼等到DOM準備就緒後再運行代碼，使用window.onload或jQuery的$(document).ready(...)模式。

來源

2013-02-13 23:58:46 satchmorun

編輯示例：您可以請示出它的完成情況。 Thasnks很多。新的瀏覽器編碼。 – Merlin 2013-02-14 15:34:22

請參閱http://jsfiddle.net/rXCqw/。您需要將腳本標記放在CLOSING正文標記之前，而不是開始的標記。現在發生的事情是腳本標記中的代碼在瀏覽器解析html

...'之前運行，所以呼叫什麼都不做。所以你可以移動腳本標籤，或者使用像http://api.jquery.com/ready/這樣的東西來確保在代碼運行之前DOM已經被完全加載。 – satchmorun 2013-02-14 15:44:21

謝謝你的工作。你能否展示如何使用jQuery的$（document）.ready（...）模式。腳本標記在頭部。在我剛剛將Tempo.prepare移至正文部分的底部之前。 – Merlin 2013-02-14 16:16:01

如何使用Tempo.js來做JSON模板？

回答

相關問題