More context on TODO: on and fn

[rajasegar]

@jenweber Need more clarification on what we are talking about. Would be helpful to create PRs for the same. https://github.com/jenweber/ember-octane-vs-classic-cheat-sheet/blob/506561b9487c280b8334769262839a78110b7c9c/index.html#L314

[simonc]

Hi, a non-obvious example that IMHO would be useful would be how to replace this pattern:

{{my-component onChange=(action (mut something) value="target.value")}}

It's hard to find any information regarding how to write this using the {{on}} and {{fn}} modifiers. ❤️

[acorncom]

@simonc thx for the input. We're working on adding that in (just added some basics on #14). For your info, if you call an @action using an on helper, your first parameter is an event, which allows you to then get what you want (event.target.value)

[ghost]

@simonc great question. I ran into this issue today. After discussion in the Octane Migration channel on Discord, 2 immediate patterns appear:

• use an addon like ember-set-helper. @alexlafroscia whipped up a nice usage example in glitch.
• create your own helper to do this. Based on Abram and @NullVoxPopuli 's idea, I added one to our application called get-input-value. It's definition looks like:

import { helper } from '@ember/component/helper';

// emulate the old action helper behavior
// so we keep keep DOM specifics to templates
// idea lifted from @NullVoxPopuli
export default helper(function getInputValue([func]) {
	return ({ target }) => {
		return func(target.value);
	}
});

Then I consume values using:

<input
	value={{this.aProperty}}
	{{on 'input' (get-input-value (fn (mut this.aProperty)))}}
	placeholder='Edit Me'
/>

[simonc]

@efx Thanks for this! Very cool little helper 😊