Implementation of the Command design pattern from C-Q-S for ember.
- Commands are a primitives to be passed around
- Commands are just functions
- Commands are composable of many functions (but stays a function)
- Commands can have/be a link (but stays a function)
- Use commands with
(fn)
and enjoy partial applications (because it stayed a function)
What you'll get:
- A
Command
class to extend from for your implementation - A
LinkCommand
as syntactic sugar for creating a link (throughember-link
) - A
@command
decorator to connect your component with your command - A
<CommandElement>
component as your building block to attach your command to the UI - The
<CommandElement>
will accept aCommand
, an@action
or a(link)
- The
<CommandElement>
will render the correct HTML element to take care of accessibility
Install ember-command
with:
ember install ember-command
The idea for ember-command
is clearly to separate your business logic from
your UI by offering a couple of
mechanics to do that.
Write an action that invokes a service within a single file component.
import { action } from 'ember-command';
import { on } from '@ember/modifier';
const inc = action(({ services }) => () => {
services.counter.inc();
});
const Counter = <template>
<button type="button" {{(inc)}}>+</button>
</template>
export default Counter;
Compose various commands together to form a primitive that can be passed around.
This works well in combination with
ember-link
.
Let's make a link and add tracking to it:
import { command, action, CommandElement } from 'ember-command';
import { link } from 'ember-link';
const track = action(({ services }) => (event: string) => {
services.tracking.track(event);
});
const HomeLink = <template>
<CommandElement @command={{command
(fn (track) "go home")
(link "application")
}}>Home</CommandElement>
</template>
export default HomeLink;
See the Contributing guide for details.
This project is licensed under the MIT License.