How to use positionalParams with angle bracket invocation

1

A component with positionalParams always also has named versions of its parameters. For example, the liquid-if component from liquid-fire has this in its Javascript file:

positionalParams: ['predicate']

That means it accepts one positional parameter, which will be named predicate. So these are equivalent:

{{#liquid-if isActive}}
{{/liquid-if}}

<LiquidIf @predicate={{isActive}} >
</LiquidIf>

There is a second way to use positionalParams, which is to gather a variable number of them into an array. That is how link-to works:

// notice that the right-hand value here is a single 
// name, not an array like in the previous example
positionalParams: 'params'

So we can pass the @params=, but unfortunately the value we pass needs to be an array, so you may want something like ember-array-helper:

{{link-to "posts" 1}}
<LinkTo @params={{array "posts" 1}} />
6 Likes
2

Thanks @ef4. An additional thing that threw me for a while and might be relevant for others reading this is when using angle bracket invocation and passing a class to liquid-bind, liquid-if and liquid-outlet(there may be others). These are tag-less components so don’t directly add a class attribute to the root node. Instead, they pass the class to a child node in the template. In angle bracket invocation, they must therefore be passed using @class, not class as one might expect e.g.

{{#liquid-bind model class="my-class" as |m|}}
{{/liquid-bind}}

converts to

<LiquidBind @value={{model}} @class="my-class" as |Model|>
</LiquidBind>
2 Likes