ember-jets
An Ember.js component to search and filter lists with CSS inline using Jets.js. Here's a demo.
Usage
Inside your ember-cli project, run ember install ember-jets
.
Now you have a {{jets-search}}
input component. Use it like this:
{{jets-search contentTag="#list" content=model}} <div id="list"> {{#each model as |item|}} <div> {{item}} </div> {{/each}}</div>
Options
contentTag
- CSS selector for the DOM container you want to search (required)content
- Array to observe for changes. For instance your model array. This will make sure the search is synced with your content (optional)filter
- CSS selector if you want to specify what to search in each row (optional)wait
number in milliseconds to debounce/wait before triggering search (optional, not enabled by default)
Here's an example with filtering:
{{jets-search contentTag="#list" items=model filter="h1"}} <div id="list"> {{#each model as |item|}} <div> <h1>{{item}} this will be searched</h1> <p>This will NOT be searched</p> </div> {{/each}}</div>
Collaborating
The below outlines the details of collaborating on this Ember addon.
Installation
git clone <repository-url>
this repositorycd ember-jets
yarn install
Running
ember serve
- Visit your app at http://localhost:4200.
### Linting
npm run lint:js
npm run lint:js -- --fix
Running tests
ember test
– Runs the test suite on the current Ember versionember test --server
– Runs the test suite in "watch mode"npm test
– Runsember try:each
to test your addon against multiple Ember versions
Running the demo/dummy application
ember serve
- Visit the dummy application at http://localhost:4200.