diff options
| author | Yuval Adam <yuv.adm@gmail.com> | 2014-05-28 12:53:06 +0300 |
|---|---|---|
| committer | Yuval Adam <yuv.adm@gmail.com> | 2014-05-28 12:53:06 +0300 |
| commit | 652a428b44088aec28cc7bf5b8ae292e2d98a398 (patch) | |
| tree | bcf0ed02b1d0c5c84958113b504c8145bc13cff1 /templates/home.html | |
| parent | ff2bdda67858b493ea0bfcd707a257d3dabef6dd (diff) | |
Templates working
Diffstat (limited to 'templates/home.html')
| -rw-r--r-- | templates/home.html | 28 |
1 files changed, 22 insertions, 6 deletions
diff --git a/templates/home.html b/templates/home.html index 9e5a0e7..dd5a702 100644 --- a/templates/home.html +++ b/templates/home.html @@ -5,17 +5,33 @@ <link rel="stylesheet" href="/static/css/bootstrap.min.css"> <link rel="stylesheet" href="/static/css/bootstrap-theme.min.css"> <script src="/static/js/jquery-2.1.1.min.js"></script> + <script src="/static/js/underscore-min.js"></script> <script src="/static/js/bootstrap.min.js"></script> + <script> + $(document).ready(function() { + var CHANNELS = 8; + var LIGHTS = 8; + + // _.templateSettings = { interpolate: /\{\{(.+?)\}\}/g }; + + _.each(_.range(CHANNELS), function(i) { + var row = $(_.template($('#light-row-template').text(), {i: i, lights: LIGHTS})); + $('#light-container').append(row); + }); + }); + </script> </head> <body> <div class="container"> <h1>Light Loop Pi</h1> - <div class="light-row"> - <button type="button" class="btn btn-success" data-toggle="button"> </button> - <button type="button" class="btn btn-success" data-toggle="button"> </button> - <button type="button" class="btn btn-success" data-toggle="button"> </button> - <button type="button" class="btn btn-success" data-toggle="button"> </button> - </div> + <div id="light-container"></div> </div> + <script type="text/template" class="template" id="light-row-template"> + <div class="light-row" data-light-row="<%= i %>"> + <% _.each(_.range(lights), function(j) { %> + <button type="button" class="btn btn-success" data-toggle="button" data-light-cell="<%= j %>"> </button> + <% }); %> + </div> + </script> </body> </html> |