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
Commandclass to extend from for your implementation - A
LinkCommandas syntactic sugar for creating a link (throughember-link) - A
@commanddecorator 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@actionor a(link) - The
<CommandElement>will render the correct HTML element to take care of accessibility
Install ember-command with:
ember install ember-commandThe 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.