Common and useful controller properties and tricks
The controllers have a few common, helpful properties.
Like controllers, you can also define other calculated properties, such as ones with variables specific to the component.
Class Name Bindings
Normal class name bindings can link a class to a parameter. If you want to link multiple classes to a state in this way, you’ll need to use it with a computed property.
Adding Positional Parameters
When using components that have params, they normally need to be explicitly named to add values to them:
However, if one or more parameters is self-explanatory/needed enough that it doesn’t need to do this, one can adjust the class so the paramters can be added without them. Add
reopenClass to the component controller like this:
Now the same component can be used like the below example. Optional params could still be added to this but not be included.
Block components allow components to accept lines of text as a large argument for the component. They’re written with two tags, like so:
In the component template, everything in the block will appear where the
yield statement is used.
If the block is an optional argument, there’s a conditional for if one is used or not. This can be if a component will use a regular argument (as part of) text if a block isn’t used, similar to the `` helper.
Using Component Variables and Actions in Blocks
You can also take values defined in the component and pass them into a block component. That way you can use them in your block HTML for display or logic. First the values being passed must be set in the `` text.
Then the values will be referenced, in order, in the block statement for the component.
You can also pass in actions from the component into the block, although it’s not as simple. First define said action:
The component will then need to yield the component itself, using
this, in addition to anything else being yielded. This example yields a component variable and then the action.
These can then be referenced as arguments for the component block, and used in the block itself. The
action helper will need the
target argument to specify the action is in the component controller. Otherwise it will, by default, look for it in the current template’s controller.
You can make a base component and then extend other components off it. If you have a group of components that need to have several functions in common, this lets you have a single source of truth for them all.
You can then import it and use it as the base for another.
When you load up the other component, the
classNames will be defined by default from the base component. You can override it if needed.