30:[] 2e:{"title":"Hello, handlebars.js!","cells":[{"id":0,"value":"md`# Hello, handlebars.js!\n\nA quick demonstration of the template engine [handlebars](https://handlebarsjs.com/).\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"md`\nFirst we load the library and register a custom helper named \\`\\`\\`times\\`\\`\\` (that renders a block n times).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"Handlebars = {\n const hb = await require('handlebars@4.1.2/dist/handlebars.min.js');\n // Register a helper.\n // n is the argument, block the inner content.\n hb.registerHelper('times', (n, block) => {\n let s = '', i = n;\n while(i-- > 0) s += block.fn(i);\n return s;\n });\n \n return hb;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"md`A template that outputs a table. It takes \"headers\" and \"rows\" as data, and renders the rows as-is (i.e., no escaping):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"table_hbs = Handlebars.compile(`\n\n{{#if headers}}\n \n {{#each headers}}{{/each}}\n \n{{/if}}\n\n \n {{#each rows}}\n {{#each @this}}{{/each}}\n {{/each}}\n \n

{{@this}}
{{{@this}}}

\n`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"md`A template that uses our custom \"times\" helper and \"~\" to skip line breaks:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"choochoo_hbs = Handlebars.compile(`\n🚂{{#times size}}🚃{{/times}}{{#if late ~}}\n{{#times late ~}} {{/times}}🏃\n{{/if}}\n`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":113,"value":"md`\nAnd finally, our glorious visualization: a fine example of storytelling through data!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"md`\n### Departures\n\n${table_hbs({headers: ['Train', 'Status'], rows: [\n ['Train 1', choochoo_hbs({size: 5})],\n ['Train 2', choochoo_hbs({size: 3, late: 55})],\n ['Train 3', choochoo_hbs({size: 8})],\n]})}\n`","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}