Ember.js - The Ember Times - Issue No. 110

Aloha Emberistas! ๐Ÿน

This week: {{on}} & {{fn}} in Octane Guides ๐Ÿ”ฅ, Foreign Key Attrs Blog Post ๐Ÿ”‘, watch This.JavaScript: State of Frameworks on Tuesday ๐Ÿ“œ, build JAMstack websites with Empress ๐Ÿ“, versioned Ember API links added to the Guides ๐Ÿ”ข, and last, but not least, an Update for Co-Located Templates in the Guides โ˜๏ธ!


This is a companion discussion topic for the original entry at https://emberjs.com/blog/2019/08/09/the-ember-times-issue-110.html
1 Like

Whatโ€™s the recommended way to use fn helper? I know that itโ€™s optional but I feel that there are values for explicitly stating that what youโ€™re passing is an action/function:

  1. It seems Ember is already headed toward the explicit experience (e.g. with @arg, this.prop, @tracked, etc.) so why not continue with it?
  2. You get an immediate error when {{fn this.functionDoesNotExist}} as opposed to {{this.functionDoesNotExist}} which will only error out when invoked.
  3. Itโ€™s easier to spot out and distinguish props vs actions in a template.
  4. Itโ€™s easier to refactor. I was able to do this quickly by just doing a search and replace for {{action to {{fn.
  5. Less learning curve. If youโ€™re passing an action, just use {{fn}}. No need to teach that itโ€™s only used when you need to pass some params. This also avoids the nitpicks in code-reviews like you donโ€™t need to use {{fn}} since weโ€™re not passing any params.

{{fn}} does NOT bind the this context, so itโ€™s not a replacement for {{action}} (in HBS) or @action (in JS).

The reason to use fn is to partially apply arguments from handlebars. For example:

<button {{on "click" (fn this.myMethod 123)}}>Click me</button>

Now, in myMethod, the first argument is 123, but this is not the same JS context:

{
  myMethod(arg1) {
    myArg // 123
    this // something other than the class/component myMethod is defined in
  }
}

This technique can be useful for all the same reasons partial application (or currying) is useful when passing around functions to places you donโ€™t control. (This is a googleable paradigm, but if you need a more specific example for Handlebars / templating / Ember, I can try to cook something up. Iโ€™ve definitely used partial application from templates especially when designing low level components that accept functions as arguments).

Yeah I get those binding concepts.

I worded it wrong. My question is that would it be better to just flat out recommend using {{fn}} even without params due to the reasons Iโ€™ve indicated in my previous post.

Iโ€™m asking this because the Octane guides seems to be recommending the opposite.

Ah I understand your question better now, sorry I misread.

I donโ€™t see a problem with always using fn other than that itโ€™s verbose for the majority of cases where no arguments are being partially applied.

I can see the benefit of scanning a template and knowing whatโ€™s a function and whatโ€™s a property, but I feel like it should also mostly be obvious.