Created
July 22, 2014 15:20
-
-
Save ratpik/d0ee4c8f1b37ab3b4ef4 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="description" content="Checkbox grid" /> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script> | |
| <script src="//code.jquery.com/jquery-1.9.1.min.js"></script> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <!-- | |
| <input type="checkbox" name="vehicle" value="Bike" >I have a bike<br>--> | |
| <div id="render-block"> | |
| </div> | |
| <script id="checkbox-template" type="text/x-handlebars-template"> | |
| <input type="checkbox" id={{id}} {{#if isChecked}} checked {{/if}} > | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var grid = {}; | |
| var x = ["mon", "tue", "wed", "thu", "fri", "sat", "sun"]; | |
| var y = ["BB", "AB", "BL", "AL", "BD", "AD", "BT"]; | |
| for(var i = 0; i < x.length; i++){ | |
| var key = x[i]; | |
| //console.log(key); | |
| grid[key] = {}; | |
| for(var j=0; j < y.length; j++){ | |
| var val = y[j]; | |
| //console.log(val); | |
| grid[key][val] =true; | |
| } | |
| } | |
| //console.log(grid); | |
| grid["tue"]["AB"] = false; | |
| //console.log(grid); | |
| var source = $("#checkbox-template").html(); | |
| var template = Handlebars.compile(source); | |
| var html = []; | |
| var context; | |
| var rows = {}; | |
| for(var key in grid){ | |
| //console.log(key); | |
| rows[key] = {}; | |
| for(var val in grid[key]){ | |
| //console.log(grid[key][val]); | |
| context = | |
| {"isChecked" : grid[key][val], id:"row-" + key + "col-" + val}; | |
| html.push(template(context)); | |
| rows[key][val] = template(context); | |
| } | |
| } | |
| for(row in rows){ | |
| var result =""; | |
| for(col in rows[row]){ | |
| result += rows[row][col]; | |
| } | |
| result = result + "<br>"; | |
| $("#render-block").append(result); | |
| } | |
| //$("#render-block").html(html); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment