✅ Backbone.js - Modifiche nei modelli

Sommario

Javascript ci permette di utilizzare eventi asincroni con cui possiamo generare azioni, per questo abbiamo un grande successo nell'uso di framework come jQuery che può ascoltare un cambiamento nell'albero DOM ed eseguire una funzione mentre il resto della pagina sta ancora lavorando.
Accesso diretto
Prima di vedere come gestire le modifiche all'interno del modello, un concetto chiave che dobbiamo gestire è l'accesso diretto agli attributi, questo grazie a un attributo .attributi che è nel modello da cui ereditiamo per fare nostro.
ImportanteQuando effettuiamo un'assegnazione di valori utilizzando questo metodo, saltiamo che venga fatto esplodere nel nostro modello e quando passiamo il attributo {silenzioso: vero} tutti i suoi eventi sono completamente messi a tacere.
Vediamo nel seguente codice di esempio a cui ci riferiamo:

Come possiamo vedere nell'esempio quando si utilizza {silenzioso: vero} non rileva alcun cambiamento nel nostro modello.
Ascolta i cambiamenti nel modello
Ascoltare i cambiamenti nei nostri modelli può essere molto utile poiché possiamo eseguire diverse azioni, dando così più dinamismo alla nostra applicazione.
Nell'esempio seguente stamperemo una riga che indica ogni volta che un attributo cambia, quindi stamperemo il valore dell'attributo, per questo nel metodo inizializzare del modello includeremo una chiamata a sul metodo e vi diremo di cosa si tratta nell'evento Cambia che dovrebbe funzionare:

Se eseguiamo questo codice otterremo una riga ogni volta che il modello cambia e inoltre una riga iniziale quando il modello viene inizializzato.
Vediamo cosa ci dà il risultato:

INGRANDIRE

Vediamo che otteniamo due righe che dicono che il modello è cambiato, questo importo coincide con le due volte che usiamo il metodo ser() Per dare un valore agli attributi del modello, vediamo anche come è stata stampata la riga di inizializzazione del modello.
Ascolta le modifiche a un particolare attributo
Questo l'opzione ci consente di eseguire un'azione quando un particolare attributo cambiaCiò che possiamo ottenere con questo è che possiamo dirigere azioni diverse se un attributo cambia o un altro, con questo otterremo un'indipendenza molto più dinamica degli eventi nell'applicazione.
Vediamo nel codice seguente come possiamo farlo:

 var Todo = Backbone.Model.extend ({// Valori di default degli attributi predefiniti: {title: '',complete: ''}, initialize: function() {console.log ('Questo modello è stato inizializzato'); this.on ('change: title', function () {console.log ('Il valore dell'attributo title è cambiato.');});}, setTitle: function (newTitle) {this.set ({title: newTitle} );}}); var myTodo = new Todo (); // Entrambi i moduli attivano l'evento di modifica: myTodo.set ('title', 'Abbiamo inserito un titolo iniziale.'); myTodo.setTitulo ('Abbiamo cambiato il titolo.'); myTodo.set ("completato", "non attiva l'evento");

Nell'immagine seguente possiamo vedere come tutto si presenta dopo aver eseguito il codice dell'esercizio precedente:

INGRANDIRE

Possiamo sistemare che solo la modifica dell'attributo title attiva l'evento, quando si modifica l'attributo completato non succede nulla e quindi non viene stampato nulla dalla console.
Alla fine di questo tutorial abbiamo già una conoscenza molto più ampia per quanto riguarda la gestione dei diversi eventi della nostra applicazione in Backbone.js.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo