[DOC lts] Angle Bracket invocation #17554
Conversation
cah-danmonroe
changed the title
| @@ -106,6 +110,12 @@ | |||
| When yielding the component via the `hash` helper, the component is invoked directly. | |||
| See the following snippet: | |||
|
|
|||
| ``` | |||
| <PersonForm as |form|> | |||
| {{form.nameInput placeholder="Username"}} | |||
There was a problem hiding this comment.
| {{form.nameInput placeholder="Username"}} | |
| <form.nameInput @placeholder={{"Username"}} /> |
There was a problem hiding this comment.
| {{form.nameInput placeholder="Username"}} | |
| <form.nameInput @placeholder="Username" /> |
There was a problem hiding this comment.
@wycats which of these is preferable?
There was a problem hiding this comment.
I used <form.nameInput @placeholder={{"Username"}} /> for now
There was a problem hiding this comment.
Generally speaking there is no need for curlies around a static string. Its not "wrong", just a bit odd...
| @@ -34,6 +37,10 @@ import { INVOKE, UPDATE } from '../utils/references'; | |||
| Additionally, the `mut` helper can be combined with the `action` helper to | |||
| mutate a value. For example: | |||
|
|
|||
| ```handlebars | |||
| <MyChild @childClickCount={{this.totalClicks}} @click-count-change={{action (mut totalClicks))}} /> | |||
There was a problem hiding this comment.
This example needs to be revised (both syntax).
There was a problem hiding this comment.
not sure what you mean here.
| @@ -22,10 +22,14 @@ const normalizeTextValue = (value: any): string => { | |||
| Example: | |||
|
|
|||
| ```handlebars | |||
| {{some-component name=(concat firstName " " lastName)}} | |||
| <SomeComponent @name={{concat firstName " " lastName}} /> | |||
There was a problem hiding this comment.
You actually don't need concat in this example at all (this was one of the selling points of angle bracket invocation). This works perfectly:
Maybe we don't need dual examples in this case?
There was a problem hiding this comment.
I left both examples but explained that it's not needed for angle bracket invocation.
| @@ -117,6 +117,12 @@ class ConditionalHelperReference extends CachedReference { | |||
|
|
|||
| You can use the `if` helper inside another helper as a nested helper: | |||
|
|
|||
| ```handlebars | |||
| <SomeComponent height={{if isBig "100" "10"}} /> | |||
There was a problem hiding this comment.
| <SomeComponent height={{if isBig "100" "10"}} /> | |
| <SomeComponent @height={{if isBig "100" "10"}} /> |
| @@ -150,6 +156,12 @@ export function inlineIf(_vm: VM, { positional }: Arguments) { | |||
|
|
|||
| You can use the `unless` helper inside another helper as a subexpression. | |||
|
|
|||
| ```handlebars | |||
| <SomeComponent height={{unless isBig "10" "100"}} /> | |||
There was a problem hiding this comment.
| <SomeComponent height={{unless isBig "10" "100"}} /> | |
| <SomeComponent @height={{unless isBig "10" "100"}} /> |
|
Sounds good, thanks for pushing it forward! |
This is the initial angle bracket invocation conversion for the docs. It should be merged back through version 3.4