helpers / helper-collection

Async collection helper for assemble.

helper-collection

Collection helper for assemble (or any other https://github.com/jonschlinkert/templates application)

Install

Install with npm:

$ npm install --save helper-collection

Usage

Register the helper with assemble:

var assemble = require('assemble');
var app = assemble();

app.helper('collection', require('helper-collection'));

Add some templates

// add some "pages" ("pages" is a built-in collection)
app.page('foo.hbs', {content: 'this is foo', data: {title: 'Foo'}});
app.page('bar.hbs', {content: 'this is bar', data: {title: 'Bar'}});
app.page('baz.hbs', {content: 'this is baz', data: {title: 'Baz'}});

// add some "posts" ("posts" is not built-in, 
// so we need to create it first)
app.create('posts'); //<= that's it :)

// now we can add some posts
app.post('aaa.hbs', {content: 'this is aaa', data: {title: 'AAA'}});
app.post('bbb.hbs', {content: 'this is bbb', data: {title: 'BBB'}});
app.post('ccc.hbs', {content: 'this is ccc', data: {title: 'CCC'}});

Usage inside templates

By default, the collection helper will get the name of the current collection being rendered. With assemble, this would most likely be "pages".

<ul>
{{#collection}}
  <!-- the collection's views (pages in this case) are 
  exposed as "items" inside the block -->
  {{#each items as |item|}}
  <li>{{item.data.title}}</li>
  {{/each}}
{{/collection}}
</ul>

Specify a collection

Or specify the collection to iterate over:

<ul>
{{#collection "posts"}}
  <!-- posts are "items" -->
  {{#each items as |item|}}
  <li>{{item.data.title}}</li>
  {{/each}}
{{/collection}}
</ul>

Sort items

Or specify the collection to iterate over:

<ul>
{{#collection}}
{{#each (sortBy items "data.title") as |item|}}
  <li>{{item.data.title}}</li>
{{/each}}
{{/collection}}
</ul>

Dynamic selection

Dynamically specify the collection to iterate over from the assemble config or front-matter (this is the real advantage of this helper over assemble's built-in helpers, since dynamically naming the collection allows you to define this logic in a partial somewhere, then use it for several collections - like "docs", "posts", and "pages").

In this example, someCollectionName represents a custom variable that you might define somewhere on the context, like front-matter.

<ul>
{{#collection someCollectionName}}
{{#each items as |item|}}
  <li>{{item.data.title}}</li>
{{/each}}
{{/collection}}
</ul>

About

Related projects

• handlebars-helper-each: Handlebars each helper, sync and async. | homepage
• handlebars-helpers: More than 130 Handlebars helpers in ~20 categories. Helpers can be used with Assemble, Generate… more | homepage
• template-helpers: Generic JavaScript helpers that can be used with any template engine. Handlebars, Lo-Dash, Underscore, or… more | homepage

Contributing

Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.

Please read the contributing guide for advice on opening issues, pull requests, and coding standards.

Building docs

(This project's readme.md is generated by verb, please don't edit the readme directly. Any changes to the readme must be made in the .verb.md readme template.)

To generate the readme, run the following command:

$ npm install -g verbose/verb#dev verb-generate-readme && verb

Running tests

Running and reviewing unit tests is a great way to get familiarized with a library and its API. You can install dependencies and run tests with the following command:

$ npm install && npm test

Author

Jon Schlinkert

• github/jonschlinkert
• twitter/jonschlinkert

License

Copyright © 2017, Jon Schlinkert. MIT

---

This file was generated by verb-generate-readme, v0.4.2, on February 10, 2017.