Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ember-polyfills/ember-fn-helper-polyfill
https://github.com/ember-polyfills/ember-fn-helper-polyfill
Last synced: 26 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/ember-polyfills/ember-fn-helper-polyfill
- Owner: ember-polyfills
- License: mit
- Created: 2019-06-06T21:07:06.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-10-18T13:26:40.000Z (about 4 years ago)
- Last Synced: 2024-12-16T08:56:30.409Z (30 days ago)
- Language: JavaScript
- Homepage:
- Size: 533 KB
- Stars: 6
- Watchers: 2
- Forks: 3
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-ember - ember-fn-helper-polyfill - This addon provides a polyfill for the {{fn}} helper as described in RFCs #470. (Packages / Polyfills)
README
ember-fn-helper-polyfill
==============================================================================This addon provides a polyfill for the `{{fn}}` helper as described in
[emberjs/rfcs#470](https://emberjs.github.io/rfcs/0470-fn-helper.html).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 aboveInstallation
------------------------------------------------------------------------------```
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:```hbs
{{! app/templates/components/items-listing.hbs }}{{#each @items as |item|}}
{{/each}}
``````js
// 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`:```js
// 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](https://en.wikipedia.org/wiki/Partial_application).
Contributing
------------------------------------------------------------------------------See the [Contributing](CONTRIBUTING.md) guide for details.
License
------------------------------------------------------------------------------This project is licensed under the [MIT License](LICENSE.md).