Get Programming with JavaScript - Listing 19.13

Listing 19.13 - The Crypt with templates

HTML:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>The Crypt</title> </head> <body> <h1>The Crypt</h1> <div id="views"> <div id="place"></div> <div id="player"></div> </div> <div id="messages"></div> <div id="controls"> <input type="text" id="txtCommand"> <button id="btnCommand">Make it so</button> </div> <!-- Templates --> <script type="text/x-template" id="itemTemplate"> <li>{{item}}</li> </script> <script type="text/x-template" id="playerTemplate"> <h3>{{name}}</h3> <p>{{health}}</p> <ol id="playerItems"></ol> </script> <script type="text/x-template" id="placeTemplate"> <h3>{{title}}</h3> <p>{{description}}</p> <div class="placePanel"> <h4>Items</h4> <ol id="placeItems"></ol> </div> <div class="placePanel"> <h4>Exits</h4> <ol id="placeExits"></ol> </div> </script> <script type="text/x-template" id="messageTemplate"> <p>*** {{message}} ***</p> </script> <!-- Modules --> <!-- gpwj.templates --> <script src="http://output.jsbin.com/pugase.js"></script> <!-- Place constructor --> <script src="http://output.jsbin.com/vuwave.js"></script> <!-- Player constructor --> <script src="http://output.jsbin.com/nonari.js"></script> <!-- player view --> <script src="http://output.jsbin.com/suyona.js"></script> <!-- place view --> <script src="http://output.jsbin.com/yoquna.js"></script> <!-- message view --> <script src="http://output.jsbin.com/jojeyo.js"></script> <!-- map data --> <script src="http://output.jsbin.com/hozefe.js"></script> <!-- map builder --> <script src="http://output.jsbin.com/paqihi.js"></script> <!-- game controller --> <script src="http://output.jsbin.com/yeqicu.js"></script> <!-- Web Page Controls --> <script src="http://output.jsbin.com/qedubi.js"></script> </body> </html>