2e:null 2f:["$","title",null,{"children":"Hello, handlebars.js! | Fabian Iwand | Observable"}] 34:[] 32:{"id":"af87f6161467b9e3","slug":"hello-handlebars-js","title":"Hello, handlebars.js!","thumbnail":"566aa2ec82019c68b6b3111675f23cebfec8c9d24ece87d53b1fc5b3a6e83bfc","access_level":"public","create_time":"$D2019-06-09T15:26:28.879Z","update_time":"$D2019-06-09T16:44:38.974Z","view_time":null,"first_public_time":"$D2019-06-09T16:38:03.634Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":"starter_2024"},"version":146,"publish_version":146,"role":null,"authored":false,"authors":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}],"members":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":{"id":"cf1a6989a02f2250","slug":"hello","title":"Hello, ... !","owner":{"id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"md`A template that uses our custom \"times\" helper and \"~\" to skip line breaks:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"md`\nAnd finally, our glorious visualization: a fine example of storytelling through data!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"