diff --git a/apps/tutorial/public/docs/3-event-handling/5-conditional-event-handling/answer.gjs b/apps/tutorial/public/docs/3-event-handling/5-conditional-event-handling/answer.gjs new file mode 100644 index 000000000..5ed772c47 --- /dev/null +++ b/apps/tutorial/public/docs/3-event-handling/5-conditional-event-handling/answer.gjs @@ -0,0 +1,25 @@ +import Component from '@glimmer/component'; +import { tracked } from '@glimmer/tracking'; +import { on } from '@ember/modifier'; + +export default class Incrementer extends Component { + @tracked clicks = 0; + @tracked enableIncrement = true; + + handleClick = () => this.clicks++; + toggle = () => this.enableIncrement = !this.enableIncrement; + + +} diff --git a/apps/tutorial/public/docs/3-event-handling/5-conditional-event-handling/prompt.gjs b/apps/tutorial/public/docs/3-event-handling/5-conditional-event-handling/prompt.gjs new file mode 100644 index 000000000..2646b70b4 --- /dev/null +++ b/apps/tutorial/public/docs/3-event-handling/5-conditional-event-handling/prompt.gjs @@ -0,0 +1,25 @@ +import Component from '@glimmer/component'; +import { tracked } from '@glimmer/tracking'; +import { on } from '@ember/modifier'; + +export default class Incrementer extends Component { + @tracked clicks = 0; + @tracked enableIncrement = true; + + handleClick = () => this.clicks++; + toggle = () => this.enableIncrement = !this.enableIncrement; + + +} diff --git a/apps/tutorial/public/docs/3-event-handling/5-conditional-event-handling/prose.md b/apps/tutorial/public/docs/3-event-handling/5-conditional-event-handling/prose.md new file mode 100644 index 000000000..66b85e5ec --- /dev/null +++ b/apps/tutorial/public/docs/3-event-handling/5-conditional-event-handling/prose.md @@ -0,0 +1,22 @@ +Events can be conditional by combining `if` syntax in _modifier space_. + +An important thing to keep in mind when writing conditional modifiers is the wrapping parenthesis: + +```hbs + +``` +rather than +```hbs + +``` + + +This exercise has set up two buttons: one to increment a value when clicked, and one to enable incrementing of that value. + +

+Adjust the code so that the toggle clicking button toggles the ability to increment the "Clicked" count. +