How can I reuse code (html + handlebars) in assemble to show categorized lists? -
i'm using assemble
for example, if have data:
{"people": [ { "name": "sally", "group": "a" }, { "name": "john", "group": "b" }, { "name": "jane", "group": "b" }, { "name": "skippy", "group": "a" } ]}
how can render 2 separate lists of names based on property values (a or b)?
here desired html output:
<p>group a</p> <ul> <li>sally</li> <li>skippy</li> </ul> <p>group b</p> <ul> <li>john</li> <li>jane</li> </ul>
currently, handlebars template code looks this. but, want avoid copying same code again , again.
<p>group a</p> {{#each index.people }} {{#is group "a"}} {{ name }}: {{ group }} {{ /is }} {{ /each }}
the solution you're using have recommended:
{{#each people}} {{#is group "a"}} .... {{/is}} {{/each}}
however, can create handlebars helper whatever want. e.g.
handlebars.registerhelper('people', function (context, group) { return context.filter(function (item) { if (item.group) { return item.group === group; } return false; }); });
now, given list:
{ "list": [ { "name": "sally", "group": "a" }, { "name": "john", "group": "b" }, { "name": "jane", "group": "b" }, { "name": "skippy", "group": "a" } ] }
you use helpers this:
{{people list 'a'}} {{people list 'b'}}
there info on assemble docs how register helpers assemble.
Comments
Post a Comment