EmberJS - Ayudantes de escritura
Puede agregar funcionalidad adicional a las plantillas y convertir los valores sin procesar de los modelos y componentes al formato adecuado para los usuarios. Si está utilizando la aplicación HTML varias veces, puede agregar un asistente personalizado desde cualquier plantilla de Handlebars. Si el contexto actual cambia, Ember.js ejecutará automáticamente el asistente y actualizará el DOM con el valor actualizado.
Sintaxis
export function Helper_Name([values]) {
//code here
}
export default Ember.Helper.helper(Helper_Name);
La siguiente tabla enumera las diferentes formas de usar nombres de ayudantes:
S.No. | Nombres y descripción del ayudante |
---|---|
1 | Argumentos de ayuda
Puede pasar más de un argumento al ayudante especificando después del nombre del ayudante. |
2 | Argumentos nombrados
Puede pasar los argumentos nombrados junto con el valor relacionado. |
3 | Escapar del contenido HTML
Se utiliza para escapar de las etiquetas HTML mientras se muestra el resultado. |
Ejemplo
El ejemplo que se muestra a continuación implementa el asistente, que toma más de una entrada y devuelve una única salida. Crea un nuevo ayudante con el siguiente comando:
ember generate helper helper-name
En este ejemplo, hemos creado el ayudante con el nombre writinghelper . Ahora abra el archivo writinghelper.js que se crea en app / helpers / .
import Ember from 'ember';
export function formatHelper([value]) {
let var1 = Math.floor(value * 100);
let cents = value % 100;
let var3 = '$';
if (cents.toString().length === 1)
return `${var3}${var1}`;
}
export default Ember.Helper.helper(formatHelper);
Puede utilizar el ayudante "writinghelper" en la plantilla entre llaves. Abra el archivo index.hbs y escriba el siguiente código:
Value is : {{writinghelper 5}}
{{outlet}}
En el código anterior, hemos pasado el valor de ayuda en la plantilla, que muestra el recuento de centavos en una cadena formateada.
Salida
Ejecute el servidor ember; recibirá el siguiente resultado:
![](https://assets.edu.lat/emberjs/images/emberjs-temp-writing-helper.jpg)