HandlebarsJS Example using a table template with sorting.
Last active
October 8, 2015 22:21
-
-
Save rmkane/95c0d7f53f1944bf5fa3 to your computer and use it in GitHub Desktop.
HandlebarsJS Template w/ Sort
This file contains hidden or 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 http-equiv="content-type" content="text/html; charset=UTF-8"> | |
| <title>Handlebars JS - Grid Template</title> | |
| <link rel="stylesheet" href="style.css" /> | |
| <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script> | |
| <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.3/handlebars.min.js"></script> | |
| <script type="text/javascript" src="sorter.js"></script> | |
| <script type="text/javascript" src="script.js"></script> | |
| </head> | |
| <body> | |
| <script id="table-template" type="text/x-handlebars-template"> | |
| <table> | |
| <thead> | |
| {{#each headers}} | |
| <th>{{this}}</th> | |
| {{/each}} | |
| </thead> | |
| <tbody> | |
| {{#records}} | |
| <tr> | |
| <td>{{fullName name}}</td> | |
| <td>{{occupation}}</td> | |
| <td><a href="https://twitter.com/{{twitter}}">@{{twitter}}</a></td> | |
| </tr> | |
| {{/records}} | |
| </tbody> | |
| </table> | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or 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
| Handlebars.registerHelper('fullName', function(name) { | |
| return name.first + ' ' + name.last; | |
| }); | |
| var data = { | |
| headers : [ 'Name', 'Occupation', 'Twitter' ], | |
| records : [ { | |
| name: { | |
| first: "Wil", | |
| last: "Wheaton" | |
| }, | |
| occupation: "Actor, writer, blogger, voice actor", | |
| twitter: "WilW" | |
| }, { | |
| name: { | |
| first: "Patrick", | |
| last: "Stewart" | |
| }, | |
| occupation: "Actor, voice actor", | |
| twitter: "SirPatStew" | |
| }, { | |
| name: { | |
| first: "Ian", | |
| last: "McKellen" | |
| }, | |
| occupation: "Actor", | |
| twitter: "IanMcKellen" | |
| } ] | |
| }; | |
| function sortIterativeCustom(p1, p2) { | |
| var fields = [ 'last', 'first' ], res = 0, i = 0; | |
| while (res === 0 && i <= fields.length) { | |
| res = comparatorHelper(p1, p2, fields[i++], 'name'); | |
| } | |
| return res; | |
| } | |
| function sortRecursiveCustom(p1, p2) { | |
| return doSort([ 'last', 'first' ], p1, p2, 'name', 0); | |
| } | |
| //data.records.sort(sortIterativeCustom); | |
| //data.records.sort(sortRecursiveCustom); | |
| //data.records.sort(sortIterative([ 'last', 'first' ], 'name')); | |
| data.records.sort(sortRecursive([ 'last', 'first' ], 'name')); | |
| $(function() { | |
| var source = $("#table-template").html(); | |
| var template = Handlebars.compile(source); | |
| $('body').append(template(data)); | |
| }); |
This file contains hidden or 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
| function comparatorHelper(a, b, property, root) { | |
| a = a[root] || a || {}; b = b[root] || b || {}; | |
| if (a[property] < b[property]) return -1; | |
| else if (a[property] > b[property]) return 1; | |
| else return 0; | |
| } | |
| function doSort(fields, p1, p2, root, res) { | |
| return res === 0 && fields.length > 0 ? doSort(fields.slice(1), p1, p2, root, comparatorHelper(p1, p2, fields[0], root)) : res; | |
| } | |
| function sortIterative(fields, root) { | |
| return function(p1, p2) { | |
| var res = 0, i = 0; | |
| while (res === 0 && i <= fields.length) { | |
| res = comparatorHelper(p1, p2, fields[i++], root); | |
| } | |
| return res; | |
| }; | |
| } | |
| function sortRecursive(fields, root) { | |
| return function(p1, p2) { | |
| return doSort(fields, p1, p2, root, 0); | |
| }; | |
| } |
This file contains hidden or 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
| body { | |
| font:15px arial,sans-serif; | |
| } | |
| h1 { | |
| margin: 0 0 10px 0; | |
| padding: 5px; | |
| font-size: 24px; | |
| background-color: #999; | |
| color: #fff; | |
| } | |
| table { | |
| margin: 10px; | |
| width : calc(100% - 20px); | |
| } | |
| th, td { | |
| padding: 5px; | |
| border: 1px solid #999; | |
| } | |
| th { | |
| background: #ccc; | |
| } | |
| tr:nth-child(even) { | |
| background: #eee; | |
| } | |
| td a, td a:link, td a:visited { | |
| color: #029; | |
| text-decoration: none; | |
| } | |
| td a:hover { | |
| color: #06B; | |
| text-decoration: underline; | |
| } | |
| td a:active { | |
| color: #902; | |
| text-decoration: none; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment