I'm following this tutorial about Ember.js and I'm struggling understanding a "simple" argument-passing issue.
I have a product JSON object:
{
"id": "1",
"name": "Headphones",
"colors": [{
"color": "red",
"image": "/assets/images/headphones-red.png"
},
{
"color": "black",
"image": "/assets/images/headphones-black.png"
}]
},
...
other products with the same structure
and this object is passed to a Product component inside the index.hbs template like this:
<Product @product={{product}}/>
Inside the Product.hbs template I have the following:
<Product::Image @src={{this.productImage}}/>
<Product::Details
@name={{@product.name}}
/>
productImage is defined inside the Product's component associate product.js:
import Component from '@glimmer/component';
export default class ProductComponent extends Component {
productImage = this.args.product.colors[0].image;
}
My question is: why do I have to define a specific component property instead of just doing the same as with the name property? Something like this:
<Product::Image @src={{@product.colors[0].image}}/>
The tutorial doesn't explain it, just says "args represents the arguments, which is the passing property. That's how we use the passing data inside JS".
Can somebody enlight me?
I guess there is no specific reason of defining a separate property to do that except perhaps that in this particular case it adds readability, i.e. "oh, we pass the product image" rather than "we pass the image value of the first element of the colors array", but I am pretty sure it goes without saying.
It is possible to do that like you proposed, but just with the slightly different syntax. The thing is that hbs doesn't understand colors[0]. But it will understand colors.[0] or even colors.0. Sooo it might be
<Product::Image @src={{@product.colors.[0].image}}/>
or
<Product::Image @src={{@product.colors.0.image}}/>
And I've played with some other options in the twiddle