Estoy siguiendo este tutorial sobre Ember.js y tengo problemas para entender un problema "simple" de paso de argumentos.
Tengo un objeto JSON de product :
{ "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 y este objeto se pasa a un componente Product dentro de la plantilla index.hbs de esta manera:
<Product @product={{product}}/> Dentro de la plantilla Product.hbs tengo lo siguiente:
<Product::Image @src={{this.productImage}}/> <Product::Details @name={{@product.name}} /> productImage se define dentro del componente asociado del Product product.js :
import Component from '@glimmer/component'; export default class ProductComponent extends Component { productImage = this.args.product.colors[0].image; } Mi pregunta es: ¿por qué tengo que definir una propiedad de componente específica en lugar de hacer lo mismo que con la propiedad de name ? Algo como esto:
<Product::Image @src={{@product.colors[0].image}}/>El tutorial no lo explica, solo dice "args representa los argumentos, que es la propiedad de paso. Así es como usamos los datos de paso dentro de JS" .
¿Alguien me puede iluminar?
Supongo que no hay una razón específica para definir una propiedad separada para hacer eso, excepto quizás que en este caso particular agrega legibilidad, es decir, "oh, pasamos la imagen del producto" en lugar de "pasamos el valor de la imagen del primer elemento de la matriz de colores", pero estoy bastante seguro de que no hace falta decirlo.
Es posible hacer eso como usted propuso, pero solo con una sintaxis ligeramente diferente. La cuestión es que hbs no entiende los colors[0] . Pero entenderá los colors.[0] o incluso colors.0 . Así que podría ser
<Product::Image @src={{@product.colors.[0].image}}/> or <Product::Image @src={{@product.colors.0.image}}/>Y he jugado con algunas otras opciones en el twiddle