examples/hoofbeats/index.html

   1 <!-- vi: set et sw=4 ts=4 si: -->
   2 <!DOCTYPE html>
   3 <html>
   4   <head>
   5     <meta charset="utf-8">
   6     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   7
   8     <title>Hoofbeats</title>
   9     <meta name="description" content="A media player">
  10     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  11
  12     <link id="cowhide-theme" rel="stylesheet" href="lib/cowhide-default.css">
  13     <link rel="stylesheet" href="stylesheets/hoofbeats.css">
  14   </head>
  15
  16   <body>
  17     <div class="container-fluid">
  18       <div id="application"></div>
  19     </div> <!-- container -->
  20
  21     <!-- initial template of our application; it just installs the outlet. -->
  22     <script type="text/x-handlebars" data-template-name="application">
  23       <div class="navbar navbar-inverse navbar-fixed-top">
  24         <div class="navbar-inner">
  25           <ul class="nav">
  26             <li>
  27                 {{#linkTo "all"}}
  28                     <i class="icon-white icon-th-list"></i>
  29                     All
  30                 {{/linkTo}}
  31             </li>
  32           </ul>
  33         </div>
  34       </div>
  35
  36       <div class="page content">
  37           {{outlet}}
  38       </div>
  39     </script>
  40
  41     <script type="text/x-handlebars" data-template-name="all">
  42         <ul class="item-list striped">
  43             {{#each mediaItem in controller}}
  44                 <li>
  45                     {{view Hoofbeats.MediaItemView contentBinding="mediaItem"}}
  46                 </li>
  47             {{/each}}
  48         </ul>
  49     </script>
  50
  51     <script type="text/x-handlebars" data-template-name="mediaItem">
  52         <div class="info">
  53             <div class="title">{{mediaItem.title}}</div>
  54             <div class="authors">{{mediaItem.artists}}</div>
  55         </div>
  56         <div class="duration">
  57             {{mediaItem.durationString}}
  58         </div>
  59     </script>
  60
  61     <!-- the UI framework -->
  62     <script src="lib/cowhide.js"></script>
  63
  64     <!-- our own js files -->
  65     <script src="javascripts/resolvers/musicbrainz.js"></script>
  66     <script src="javascripts/library.js"></script>
  67
  68     <!-- the application framework -->
  69     <script src="lib/handlebars-1.0.rc.2.js"></script>
  70     <script src="lib/ember-1.0.0-pre.4.js"></script>
  71
  72     <!-- other useful js files -->
  73     <script src="lib/moment.js"></script>
  74
  75     <!-- the Ember app -->
  76
  77     <!-- main files -->
  78     <script src="javascripts/app/app.js"></script>
  79     <script src="javascripts/app/router.js"></script>
  80     <script src="javascripts/app/store.js"></script>
  81
  82     <!-- models -->
  83     <script src="javascripts/app/models/mediaItemModel.js"></script>
  84
  85     <!-- controllers -->
  86     <script src="javascripts/app/controllers/allController.js"></script>
  87
  88     <!-- views -->
  89     <script src="javascripts/app/views/allView.js"></script>
  90     <script src="javascripts/app/views/mediaItemView.js"></script>
  91
  92   </body>
  93 </html>