bmeurant / ember-array-contains-helper

Ember helper to test the presence of a value in an array
http://bmeurant.github.io/ember-array-contains-helper/
MIT License
22 stars 2 forks source link

ember-array-contains-helper

Important notice !!

This addon is not maintained

In recent Ember versions, you problem don't need an addon for this case. With the introduction of helper functions, you can just easily create a local helper that checks if an element is contained in an array.

If you want the helper to react to add/removals, you should be using some version of a "reactive" array. Either EmberArray or TrackedArray from tracked-built-ins. See demo here.

In any case, this addon should be compatible with basically every ember version from 3.28 to 5.x.

npm version License

Ember Observer Score

Ember template helper allowing to test if an array contains a particular element.

{{array-contains this.model 'value' property='title'}}

This helper allows to test the presence of a literal, a full object or a specific property/value of an object inside a given array. Objects can be native or Ember objects.

Compatibility

Troubleshooting

Before its version 2.x, this addon came with a polyfill (ember-runtime-enumerable-includes-polyfill) emulating the native EcmaScript method includes in case you wanted to run it within an environment that did not support this method.

Since its version 2.x, the polyfill is not included by default and this addon relies on the fact that it is run in an environment supporting the includes method. Errors will occur if it is not the case.

If you want to use this addon in an older browser or environment that does not support includes, you must then now explicitely add the polyfill as a regular dependency: yarn add ember-runtime-enumerable-includes-polyfill.

Installation

Usage

{{array-contains <array> <value> [property='<property>']}}

Where:

This helper could be:

Depending on the given parameters, the test is made on

// routes/application.js

import Route from '@ember/routing/route';

export default class ApplicationRoute extends Route {
  model() {
    return ['Akira', 'Blacksad', 'CalvinAndHobbes'];
  }
}
{{! templates/application.hbs }}

{{array-contains this.model 'Akira'}}
// routes/application.js

import Route from '@ember/routing/route';
import Comic from '../models/comic';

let blackSad = Comic.create({
  title: 'Blacksad',
});

let calvinAndHobbes = Comic.create({
  title: 'Calvin and Hobbes',
});

let akira = Comic.create({
  title: 'Akira',
});

export default class ApplicationRoute extends Route {
  model() {
    return [akira, blacksad, calvinAndHobbes];
  }

  setupController(controller) {
    super.setupController(...arguments);
    controller.calvinAndHobbes = calvinAndHobbes;
  }
}
{{! templates/application.hbs }}

{{array-contains this.model this.calvinAndHobbes}}
// routes/application.js

import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default class ApplicationRoute extends Route {
  @service store;

  model() {
    return this.store.findAll('comic');
  }
}
{{! templates/application.hbs }}

{{array-contains this.model 'Blacksad' property='title'}}

null and undefined

null and undefined are considered acceptable values for 'value' parameter.

It could eventually break some apps relying on the initial behaviour but it has been considered as a fix since the first behaviour was accidental. See this issue for details.

Development

Installation

Running dummy demo app

Linting

Running Tests

Building

Generating documentation

This addon uses YUIDoc via ember-cli-yuidoc. yuidoc-ember-cli-theme makes it pretty. Docs generation is enabled in development mode via ember build or ember serve with or without --docs auto refresh option. It can also be explicitely generated with ember ember-cli-yuidoc command.

For more information on using ember-cli, visit https://www.ember-cli.com/.