EmberJS - Scrittura di aiutanti

È possibile aggiungere funzionalità extra ai modelli e convertire i valori grezzi di modelli e componenti nel formato appropriato per gli utenti. Se stai utilizzando l'applicazione HTML più volte, puoi aggiungere un helper personalizzato da qualsiasi modello di Handlebars. Se il contesto corrente cambia, Ember.js eseguirà automaticamente l'helper e aggiornerà il DOM con il valore aggiornato.

Sintassi

export function Helper_Name([values]) {
   //code here
}

export default Ember.Helper.helper(Helper_Name);

La tabella seguente elenca i diversi modi di utilizzare i nomi degli helper:

S.No. Nomi e descrizione degli aiutanti
1 Argomenti di supporto

È possibile passare più di un argomento all'helper specificando dopo il nome dell'helper.
2 Argomenti denominati

È possibile passare gli argomenti denominati insieme al valore correlato.
3 Escape del contenuto HTML

Viene utilizzato per sfuggire ai tag HTML durante la visualizzazione del risultato.

Esempio

L'esempio fornito di seguito implementa l'helper, che accetta più di un input e restituisce un singolo output. Crea un nuovo aiutante con il seguente comando:

ember generate helper helper-name

In questo esempio, abbiamo creato l'helper con il nome writinghelper . Ora apri il file writinghelper.js che viene creato in 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);

Puoi usare l'helper "writinghelper" nel modello tra parentesi graffe. Apri il file index.hbs e scrivi il codice seguente:

Value is : {{writinghelper 5}}
{{outlet}}

Nel codice sopra, abbiamo passato il valore dell'helper nel modello, che mostra il conteggio dei centesimi in una stringa formattata.

Produzione

Esegui il server ember; riceverai il seguente output -