Skip to content

Commit

Permalink
Create closure action form of action helpers
Browse files Browse the repository at this point in the history
- `pipe-action` helper
- `toggle-action` helper
  • Loading branch information
poteto committed Mar 31, 2016
1 parent 9e3a003 commit fcd55f4
Show file tree
Hide file tree
Showing 11 changed files with 105 additions and 1 deletion.
32 changes: 31 additions & 1 deletion README.md
Expand Up @@ -109,7 +109,22 @@ Pipes the return values of actions in a sequence of actions. This is useful to c
</button>
```
The `pipe` helper is also Promise-aware, meaning that if any action in the pipeline returns a Promise, its return value will be piped into the next action.
The `pipe` helper is Promise-aware, meaning that if any action in the pipeline returns a Promise, its return value will be piped into the next action. If the Promise rejects, the rest of the pipeline will be aborted.
The `pipe` helper can also be used directly as a closure action (using `pipe-action`) when being passed into a Component, which provides an elegant syntax for composing actions:
```hbs
{{foo-bar
addAndSquare=(pipe-action (action "add") (action "square")
multiplyAndSquare=(pipe-action (action "multiply") (action "square")
}}
```
```hbs
{{! foo-bar/template.hbs }}
<button {{action addAndSquare 2 4}}>Add and Square</button>
<button {{action multiplyAndSquare 2 4}}>Multiply and Square</button>
```
**[⬆️️ back to top](#available-helpers)**
Expand All @@ -131,6 +146,21 @@ Toggles a boolean value.
</button>
```
`toggle` can also be used directly as a closure action using `toggle-action`:
```hbs
{{foo-bar
toggleIsExpanded=(toggle-action "isExpanded" this)
toggleIsSelected=(toggle-action "isSelected" this)
}}
```
```hbs
{{! foo-bar/template.hbs }}
<button {{action toggleIsExpanded}}>Open / Close</button>
<button {{action toggleIsSelected}}>Select / Deselect</button>
```
**[⬆️ back to top](#available-helpers)**
---
Expand Down
5 changes: 5 additions & 0 deletions addon/-private/closure-action.js
@@ -0,0 +1,5 @@
import Ember from 'ember';

const ClosureActionModule = Ember.__loader.require('ember-routing-htmlbars/keywords/closure-action');

export default ClosureActionModule.ACTION;
8 changes: 8 additions & 0 deletions addon/helpers/pipe-action.js
@@ -0,0 +1,8 @@
import { helper } from 'ember-helper';
import { pipe } from './pipe';
import ACTION from '../-private/closure-action';

const closurePipe = pipe;
closurePipe[ACTION] = true;

export default helper(closurePipe);
8 changes: 8 additions & 0 deletions addon/helpers/toggle-action.js
@@ -0,0 +1,8 @@
import { helper } from 'ember-helper';
import { toggle } from './toggle';
import ACTION from '../--private/closure-action';

const closureToggle = toggle;
closureToggle[ACTION] = true;

export default helper(closureToggle);
2 changes: 2 additions & 0 deletions addon/index.js
Expand Up @@ -18,12 +18,14 @@ export { default as InvokeHelper } from './helpers/invoke';
export { default as JoinHelper } from './helpers/join';
export { default as MapByHelper } from './helpers/map-by';
export { default as PipeHelper } from './helpers/pipe';
export { default as PipeActionHelper } from './helpers/pipe-action';
export { default as RangeHelper } from './helpers/range';
export { default as RejectByHelper } from './helpers/reject-by';
export { default as RepeatHelper } from './helpers/repeat';
export { default as SortByHelper } from './helpers/sort-by';
export { default as TakeHelper } from './helpers/take';
export { default as ToggleHelper } from './helpers/toggle';
export { default as ToggleActionHelper } from './helpers/toggle-action';
export { default as UnderscoreHelper } from './helpers/underscore';
export { default as UnionHelper } from './helpers/union';
export { default as WHelper } from './helpers/w';
Expand Down
1 change: 1 addition & 0 deletions app/helpers/pipe-action.js
@@ -0,0 +1 @@
export { default } from 'ember-composable-helpers/helpers/pipe-action';
1 change: 1 addition & 0 deletions app/helpers/toggle-action.js
@@ -0,0 +1 @@
export { default } from 'ember-composable-helpers/helpers/toggle-action';
3 changes: 3 additions & 0 deletions tests/dummy/app/templates/components/perform-calculation.hbs
@@ -0,0 +1,3 @@
<button {{action calculate 2 4}}>
Calculate
</button>
3 changes: 3 additions & 0 deletions tests/dummy/app/templates/components/toggle-button.hbs
@@ -0,0 +1,3 @@
<button {{action toggleAction}}>
Toggle
</button>
25 changes: 25 additions & 0 deletions tests/integration/helpers/pipe-action-test.js
@@ -0,0 +1,25 @@
import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';

moduleForComponent('pipe-action', 'Integration | Helper | {{pipe-action}}', {
integration: true
});

test('it can be used as a closure action', function(assert) {
let value = 0;
this.on('add', (x, y) => x + y);
this.on('square', (x) => x * x);
this.on('squareRoot', (x) => value = Math.sqrt(x));
this.render(hbs`
{{perform-calculation
calculate=(pipe-action
(action "add")
(action "square")
(action "squareRoot"))
}}
`);

assert.equal(value, '0', 'precond - should render 0');
this.$('button').click();
assert.equal(value, '6', 'should render 6');
});
18 changes: 18 additions & 0 deletions tests/integration/helpers/toggle-action-test.js
@@ -0,0 +1,18 @@
import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';

moduleForComponent('toggle-action', 'Integration | Helper | {{toggle-action}}', {
integration: true
});

test('it can be used as a closure action', function(assert) {
this.set('isExpanded', false);
this.render(hbs`
<p>{{if isExpanded "I am expanded" "I am not"}}</p>
{{toggle-button toggleAction=(toggle "isExpanded" this)}}
`);

this.$('button').click();

assert.equal(this.$('p').text().trim(), 'I am expanded', 'should be expanded');
});

0 comments on commit fcd55f4

Please sign in to comment.