Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Latest commit 4277aa6 Jun 19, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
addon Initial implementation. Jun 6, 2019
app Initial implementation. Jun 6, 2019
config Add Ember 3.8 and 3.10 to CI config. Jun 6, 2019
lib Fix usage of `(fn (mut this.something) someValue)`. Jun 19, 2019
tests Fix usage of `(fn (mut this.something) someValue)`. Jun 19, 2019
vendor Initial Commit from Ember CLI v3.10.1 Jun 6, 2019
.editorconfig Initial Commit from Ember CLI v3.10.1 Jun 6, 2019
.ember-cli Initial Commit from Ember CLI v3.10.1 Jun 6, 2019
.eslintignore Initial Commit from Ember CLI v3.10.1 Jun 6, 2019
.eslintrc.js Fix usage of `(fn (mut this.something) someValue)`. Jun 19, 2019
.gitignore Initial Commit from Ember CLI v3.10.1 Jun 6, 2019
.npmignore Initial Commit from Ember CLI v3.10.1 Jun 6, 2019
.template-lintrc.js Initial Commit from Ember CLI v3.10.1 Jun 6, 2019
.travis.yml Add Ember 3.8 and 3.10 to CI config. Jun 6, 2019
.watchmanconfig Initial Commit from Ember CLI v3.10.1 Jun 6, 2019
CHANGELOG.md Release 1.0.2 Jun 19, 2019
CONTRIBUTING.md Initial Commit from Ember CLI v3.10.1 Jun 6, 2019
LICENSE.md Initial Commit from Ember CLI v3.10.1 Jun 6, 2019
README.md
RELEASE.md Add release-it setup. Jun 6, 2019
ember-cli-build.js Initial Commit from Ember CLI v3.10.1 Jun 6, 2019
index.js Update name of the registered AST plugin. Jun 19, 2019
package.json Release 1.0.2 Jun 19, 2019
testem.js Initial Commit from Ember CLI v3.10.1 Jun 6, 2019
yarn.lock Add release-it setup. Jun 6, 2019

README.md

ember-fn-helper-polyfill

This addon provides a polyfill for the {{fn}} helper as described in emberjs/rfcs#470.

Compatibility

  • Completely inert when running ember-source 3.11 or higher
  • Tested against ember-source v2.12, v2.16, v2.18, v3.4, v3.8, and v3.10 in CI
  • Ember CLI v3.4 or above
  • Node.js v8 or above

Installation

ember install ember-fn-helper-polyfill

Usage

The fn helper allows you to ensure a function that you are passing off to another component, helper, or modifier has access to arguments that are available in the template.

For example, if you have an each helper looping over a number of items, you may need to pass a function that expects to receive the item as an argument to a component invoked within the loop. Here's how you could use the fn helper to pass both the function and its arguments together:

{{! app/templates/components/items-listing.hbs }}

{{#each @items as |item|}}
  <DisplayItem @item=item @select={{fn this.handleSelected item}} />
{{/each}}
// app/components/items-list.js
import Component from '@glimmer/component';
import { action } from '@ember/object';

export default class ItemsList extends Component {
  @action
  handleSelected(item) {
    // ...snip...
  }
}

In this case the display-item component will receive a normal function that it can invoke. When it invokes the function, the handleSelected function will receive the item and any arguments passed, thanks to the fn helper.

Let's take look at what that means in a couple circumstances:

  • When invoked as this.args.select() the handleSelected function will receive the item from the loop as its first and only argument.
  • When invoked as this.args.select('foo') the handleSelected function will receive the item from the loop as its first argument and the string 'foo' as its second argument.

In the example above, we used @action to ensure that handleSelected is properly bound to the items-list, but let's explore what happens if we left out @action:

// app/components/items-list.js
import Component from '@glimmer/component';

export default class ItemsList extends Component {
  handleSelected(item) {
    // ...snip...
  }
}

In this example, when handleSelected is invoked inside the display-item component, it will not have access to the component instance. In other words, it will have no this context, so please make sure your functions are bound (via @action or other means) before passing into fn!

See also partial application.

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.

You can’t perform that action at this time.