0

I am trying to use Tempo.js for templating, The documents are sparse. Please try to do it in SO, not jsFiddle. 

 <!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>
Merlin
  • 24,552
  • 41
  • 131
  • 206

1 Answers1

2

You're trying to run the Tempo.prepare call before the DOM with the ID it references has loaded.

Either put the script tag right before the </body> closing tag, or wait until the DOM's ready before running the code, using something window.onload or jQuery's $(document).ready(...) pattern.

satchmorun
  • 12,487
  • 2
  • 41
  • 27
  • Edited the example: Can you please show how its done. Thasnks much. New to browser coding. – Merlin Feb 14 '13 at 15:34
  • See http://jsfiddle.net/rXCqw/. You need to put the script tag before the CLOSING body tag, not the opening one. What's happening now is that the code in the script tag is running before the browser has parse the html `
      ...
    `, so the call does nothing. So you can move the script tag around, or use something like http://api.jquery.com/ready/ to make sure the DOM has been fully loaded before your code runs.     – satchmorun Feb 14 '13 at 15:44
  • THANK YOU it worked. Could you show how to use the jQuery's $(document).ready(...) pattern. with script tag in the head. Before I just moved Tempo.prepare to bottom of body section. – Merlin Feb 14 '13 at 16:16
  • If you have jquery loaded, you just wrap the code that needs to wait for the DOM in a function and use that function as the argument to the jquery document ready: so if you some `...code...`, you first wrap it in a function `function() { ...code... }`, and use that as the argument: `$(document).ready(function() { ...code... })`. – satchmorun Feb 14 '13 at 16:28
  • Could I do var JSONData = function() { ...code... }, $(document).ready(JSONData), Do I need to use function() { ...code... } twice? – Merlin Feb 14 '13 at 16:42
  • Of course you can. I was just retyping for the sake of showing where things go. – satchmorun Feb 14 '13 at 17:00