Need clarification over some syntax

Questions
1

Hi there,

Been using the latest version of Ember and getting used to all the new syntax and features. Great stuff!

I just need someone to help me clarify a few things as I’m trying to learn from a combination of the current docs and the new, upcoming docs under the Octane edition of ember.

  1. What’s the correct (preferred?) way to reference attributes not passed in from a parent component or controller? I started out doing {{this.value}} which works but so does {{value}}. I’m guessing the this is implied and maybe it’s just good practice to do {{this.value}}?

  2. Trying to get my head wrapped around passing actions around. It appears that I can do @onChange={{action myAction}} or @onChange={{fn myAction}} or @onChange={{action "myAction}} etc. Guess my question is when do I need action vs fn?

Appreciate it!

2

  1. Yes, adding this to reference properties on the component is the new “standard” and there is a linting rule that’ll warn you of missing this. That way you can identify anything without this as a Template Helper. Additionally, any arguments being passed into a component should be referenced as @argName within the template (this.args.argName within the Component Class).

  2. You should be able to move away from {{action}} by using a combination of; @action decorator on the action function definition to bind the calling context, {{on}} modifier to attach the action to a DOM even callback/listener, and {{fn}} helper for partial application of arguments. There are other things that {{action}} provides that I didn’t cover but for the most part you should be able to move away from using it.