Skip to content

Instantly share code, notes, and snippets.

@BigBlueHat

BigBlueHat/data-and-template.js

Last active August 29, 2015 14:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save BigBlueHat/11543071 to your computer and use it in GitHub Desktop.
Save BigBlueHat/11543071 to your computer and use it in GitHub Desktop.
Download ZIP
Mustache "tree" navigation for year + months
Raw
data-and-template.js
data = {"years":{"rows": [{"value": 3047, "key": [2014], "year": 2014}, {"months": {"rows": [{"value": 554, "key": [2013, 12], "month": 12}, {"value": 467, "key": [2013, 11], "month": 11}, {"value": 503, "key": [2013, 10], "month": 10}, {"value": 241, "key": [2013, 9], "month": 9}, {"value": 428, "key": [2013, 8], "month": 8}, {"value": 442, "key": [2013, 7], "month": 7}, {"value": 434, "key": [2013, 6], "month": 6}, {"value": 730, "key": [2013, 5], "month": 5}, {"value": 456, "key": [2013, 4], "month": 4}, {"value": 1118, "key": [2013, 3], "month": 3}, {"value": 387, "key": [2013, 2], "month": 2}, {"value": 489, "key": [2013, 1], "month": 1}]}, "value": 6249, "key": [2013], "year": 2013}, {"value": 4407, "key": [2012], "year": 2012}]}};
template = '{{#years}}<ul> {{#rows}} <li><a href="/{{year}}/?q={{#qs}}{{q}}{{/qs}}">{{year}}</a> ({{value}}) {{^months}} - no months {{/months}}{{> months}} </li> {{/rows}}</ul>{{/years}}';
months = '{{#months}}<ul> {{#rows}} <li><a href="/{{year}}/{{month}}/?q={{#qs}}{{q}}{{/qs}}">{{month}}</a> ({{value}})</li> {{/rows}}</ul>{{/months}}';
$('#output').html(Mustache.render(template, data, {months: months}));
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</div><title>JS Bin</title>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="https://raw.githubusercontent.com/janl/mustache.js/master/mustache.js"></script>
<script src="data-and-template.js"></script>
</head>
<body>
<div id="output">
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment