ember-cli-filter-component

Table of Contents

• About
• Installation
• Usage
  • Sample template
  • Block parameters
  • Properties
• Development
  • Link ember-cli-filter-component to your project
  • Running tests

About

ember-cli-filter-component provides a {{filter-content}} block component for filtering arrays of items.

• Live example - external link
• Sample code - available in EXAMPLES.md
• Changelog - available in CHANGELOG.md

Installation

cd /path/to/projects/cool-project
ember install ember-cli-filter-component

Usage

Sample template

{{#filter-content content=ingredients properties="name" as |filteredIngredients query|}}
  {{input value=query}}
  {{#each filteredIngredients as |ingredient|}}
    {{! ... }}
  {{/each}}
{{/filter-content}}

Block parameters

{{filter-content as |filtered query|}}

filtered {array}

• DescriptionComputed result of filtering items from content against query
• NotePassed as the first block param to the component yield

query {string}

• DescriptionValue matched against items from content
• NotePassed as the second block param to the component yield

Properties

content (required) {array.<array, object>}

• DescriptionItems being checked for matches against query

properties (required) {string}

• DescriptionProperties on each item to filter
  • Space-delimited
  • Enumerables are represented using @each
  • ex: properties="title category.@each"

timeout {number}

• DescriptionTime in milliseconds to debounce applying the filter when content, properties, or query
• Default: 420

query {string}

• DescriptionValue used to match against items from content

Development

To start developing/testing locally, clone the project to your machine.

cd /path/to/projects
git clone [email protected]:zakmac/ember-cli-filter-component.git

Once cloned, you can start editing and testing in the project folder itself, or include the addon in another project via npm link.

Link ember-cli-filter-component to your project

# create an npm link from the project directory
cd /path/to/projects/ember-cli-filter-component
npm link

# include the npm link in your project
cd /path/to/projects/cool-project
npm link ember-cli-filter-component

The last step is to add "ember-cli-filter-component": "" to the devDependencies section of your project's package.json.

Next time your project is run, the filter-content component will be accessible.

Running tests

The command ember test will run the test suite via CLI, outputting results.

You can also run ember test --server to launch a Test'em browser session.

License

This project is licensed under the MIT License.