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

Popular posts from this blog

apache - Remove .php and add trailing slash in url using htaccess not loading css -

javascript - jQuery show full size image on click -