Conversation
olvap
force-pushed
the
riot-basic-component
branch
from
fc95687 to
6c78733
Compare
|
@lucasroman te agregué unos detalles y arreglé el largo de algunas lineas. decime que te parece. Por mi ya lo podemos mergear y ver de armar el segundo tutorial. |
eloyesp
left a comment
eloyesp
left a comment
There was a problem hiding this comment.
El tutorial tiene algunos problemas que ahí te marqué... además hice un plunker donde se puede probar, para asegurar que ande: http://plnkr.co/edit/8PPUPoovZy27RYj00uwU?p=preview
|
|
||
| De esta forma, usamos 3 veces la etiqueta. Las dos primeras, se usan definiendo | ||
| un nombre y la tercera usa el valor por defecto. | ||
| Notar que las etiquetas del componente ```<hello-world/>``` que definimos se |
There was a problem hiding this comment.
Esto es cierto sólo en los archivos .tag, no en html.
There was a problem hiding this comment.
No entiendo bien a qué te referís. Querés decir que los saludos personalizados y por defecto sólo funcionan porque es una etiqueta personalizada, en cambio en las etiquetas nativas de HTML no pueden hacer eso. ¿Eso querés decir?.
| <h1>hola {name}!</h1> | ||
|
|
||
| <script> | ||
| name = opts.name |
There was a problem hiding this comment.
esto sería this.name = opts.name || "mundo" de esta forma es más simple el montaje del elemento (y es más fácil de utilizar).
There was a problem hiding this comment.
@lucasroman querés agregar un comentario porque usamos el default en el momento de montar el componente.
There was a problem hiding this comment.
Bueno acá hay dos cosas para aclarar:
- El "this" lo estuvimos discutiendo con @olvap si iba o no. Yo lo borré porque en la guía de riot decía:
Smart ES6 like method syntax is supported: methodName() { } becomes this.methodName = function() {}.bind(this) where this always points to the current tag instance.
Pero puede que lo haya entendido mal y se refería a cuando estás usando del tag en el HTML, no en el archivo .tag. Bueno, si está mal me avisan y lo vuelvo a poner.
| h1 { color: red; } | ||
| </style> | ||
|
|
||
| <h1>hola {name}!</h1> |
There was a problem hiding this comment.
No sería mejor usar {opts.name} directamente?
There was a problem hiding this comment.
La idea era mostrar que la lógica va en otro lado. a lo mejor podamos hacer algo más complejo.
There was a problem hiding this comment.
@eloyesp la respuesta a tu pregunta es "sí", pero fijate que arriba de ese código hay una lista de elementos que puede tener un tag:
- CSS
- HTML
- Javascript
La idea de ese código es mostrar una correspondencia con esa lista para que se vean claramente esas tres secciones.
There was a problem hiding this comment.
En ese caso, lo mejor sería agregar algo de javascript real, una posibilidad sería agregar los signos de admiración pasados 5 segundos o algo así:
setTimeout(function () { "agregar el signo de admiración o hacer algo loco" }, 1000)There was a problem hiding this comment.
Listo, ahí subí cambios.
| <script> | ||
| // El saludo por defecto será "hola mundo!" | ||
| riot.mount('hello-world', {name: 'mundo'}) | ||
| </script> |
There was a problem hiding this comment.
Este script va al final del documento o esperar al evento onready. En este caso está andando solo porque tarda en compilar el tag.
There was a problem hiding this comment.
I agree. Will be in next commit.
| title: "Riot Tutorial 1 - Componente Básico" | ||
| date: 2017-07-14 10:00:00 -0300 | ||
| tags: tutorial | ||
| categories: en |
There was a problem hiding this comment.
El texto está en español, así que la category sería "es".
| <hello-world> | ||
| <style> | ||
| h1 { color: red; } | ||
| </style> |
There was a problem hiding this comment.
Preferiría no incorporar demasiados conceptos nuevos al principio para no complicar a la persona que lo lea, recuerden que sería una de las primeras cosas hechas en riot. Pero si lo consideran útil lo agrego.
julioalucero
force-pushed
the
master
branch
2 times, most recently
from
b1f8b52 to
d26ebf8
Compare
| <hello-world></hello-world> | ||
|
|
||
| <!-- El script va al final del documento --> | ||
| <script type=riot/tag src="hello-world.tag"></script> |
There was a problem hiding this comment.
en los pasos de arriba, estás poniendo que los scripts los vas agregando en el head, pero cuando los mostrás terminado, están en e body.
| ```html | ||
| <head> | ||
| <script type=riot/tag src="hello-world.tag"></script> | ||
| </head> |
There was a problem hiding this comment.
En el texto dice: al final del
pero en el ejemplo está en el bodyhead...
4 participants
No description provided.