npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ember-array-contains-helper

v3.0.0

Published

Ember helper to test the presence of an item in an array

Downloads

15,187

Readme

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

  • This helper is tested against Ember 3.28+

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

  • ember install ember-array-contains-helper

Usage

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

Where:

  • <array> is the array to search into. Should be a valid not null array.
  • <value> is the value which is supposed to be contained in the arrray. Could be an object or a literal, null or undefined.
  • <property> is an option: if set, the search is done on the presence of an object containing a property <property> with the value <value>. If not, the search is done of the presence of the full <value> (object or literal)

This helper could be:

  • used standalone:
    {{array-contains this.model 'value' property='title'}}
  • or, more often, combined with the if helper:
    {{if
      (array-contains this.model 'value' property='title')
      'something'
      'something else'
    }}

Depending on the given parameters, the test is made on

  • the presence of a literal:
// 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'}}
  • the presence of the object itself:
// 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}}
  • the presence of an object containing a specific property with a specific value using the option property:
// 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.

  • until ember 2.9, null and undefined are both coerced to null by the templating engine. The following expressions are therefore both leading to check for the presence of a null value inside the array:

    {{array-contains collection null}}
    {{array-contains collection undefined}}
  • ember 2.10 (glimmer) changed this behaviour. undefined are then preserved and not coerced to null anymore.

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

  • git clone https://github.com/bmeurant/ember-array-contains-helper
  • cd ember-array-contains-helper
  • npm install

Running dummy demo app

Linting

  • npm run lint:js
  • npm run lint:js -- --fix

Running Tests

  • ember test – Runs the test suite on the current Ember version
  • ember test --server – Runs the test suite in "watch mode"
  • npm test – Runs ember try:each to test your addon against multiple Ember versions

Building

  • ember build

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/.