Ember usa la biblioteca de plantillas de manubrios para modificar la interfaz de usuario de la aplicación. Los handlebars son como el código HTML, pero brindan funciones adicionales a los desarrolladores, como agregar expresiones que pueden cambiar la página que se muestra. Podemos usar las otras características de los manillares para tener una idea clara de los manillares Ember. Una vez que le dice a Ember que represente la plantilla que ha creado, no hay necesidad de escribir código adicional porque los manillares pueden manejar eso fácilmente.
Pasos:
Definir plantilla: si no usa herramientas de compilación, simplemente puede definir la plantilla de su aplicación dentro de su HTML usando una etiqueta de secuencia de comandos.
- Luego, la plantilla se compila y se convierte en su plantilla de aplicación cuando se carga.
HTML
<html>
<body>
<script type="text/x-handlebars">
Hello, <strong>{{first_Name}} {{last_Name}}</strong>!
</script>
</body>
</html>
- Podemos definir la plantilla por su nombre y se puede utilizar más adelante si es necesario. Esto es útil cuando queremos usar el mismo código una y otra vez en diferentes lugares en lugar de escribir ese código, simplemente podemos crear una plantilla por su nombre y usarla cuando sea necesario. Usamos el atributo data-template-name para dar un nombre a la plantilla.
HTML
<html>
<head>
<script type="text/x-handlebars" data-template-name="tempName">
<div class="my-class1">{{first_Name}}</div>
</script>
</head>
</html>
Manillar Expresiones:
- Cada plantilla tiene su propio controlador que puede mostrar cualquier cosa al encontrar el nombre de la propiedad.
- Podemos imprimir la propiedad desde el controlador envolviendo el nombre de la propiedad entre llaves. Buscará las propiedades first_Name y last_Name y luego las colocará en HTML DOM y las mostrará.
Hii, <strong>{{first_Name}} {{last_Name}}</strong>!!!
- De forma predeterminada, nuestra plantilla de aplicación está vinculada a nuestro ApplicationController como se muestra a continuación:
App.ApplicationController = Ember.Controller.extend({
first_Name: "Dreke",
last_Name: "Pirnick"
});
- El controlador y la plantilla anteriores mostrarán el contenido HTML como se muestra a continuación:
Hii, <strong>Dreke Pirnick</strong>!!!
- Cuando el tamaño de nuestra aplicación sea grande, tendríamos más plantillas y cada una de ellas estaría vinculada a diferentes controladores.
- Cuando los valores de la plantilla cambien, el contenido HTML se actualizará automáticamente.
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA