Ember-cli-fsg-list
ember-cli-fsg-list is an EmberCLI addon. It is a filterable, sortable, and groupable Ember component. You can also assign custom action to the items in the list.
It is really helpful when you want to create something like this:
Example:
- In your ember app, run:
npm install ember-cli-fsg-list --save-dev
- In your controller 'app/controllers/demo.js':
var DemoController = EmberController;
- In your template 'app/templates/demo.hbs'
input value=filterTerm placeholder="name"<ul> fsg-list list = list itemPartial = itemPartial filterTerm = filterTerm filterBy = filterKeys sortBy = sortKeys groupBy = groupFn groupTitleAttrs = groupTitleAttrs actionName = 'logToConsole' titleImageUrl = titleImageUrl </ul>
- In your partial template 'app/template/person.hbs'
<!-- _isTitle and _title are provided by the groupBy function --> {{#if item._isTitle}} {{item._title}} {{else}} <!-- _selectItem will bubble up to 'logToConsole' in your controller--> {{item.id}} ({{item.occupation}}) {{item.name}} {{/if}}
Component variables:
- list: Ember array of Ember objects
- itemPartial: string, template name
- filterTerm: string
- filterBy: array of strings OR function
- sortBy: array of strings OR function
- groupBy: a function
- groupTitleAttrs: array of strings
- actionName: string, action name in your controller
Emitted variables from the component to partial template:
- item: Ember object, an object from the input list
- item._isTitle: boolean, if this item is a group title
- item._title: string, output of the group function
- _selectItem: function, used to bubble up the action to your controller