Backbone.js - El Element

Al momento sappiamo che le visualizzazioni in Backbone.js Funzionano con la logica di come presentare le informazioni strutturate con il modello, sorge la domanda su come lo esprimiamo nella nostra applicazione, ciò che facciamo è lavorare con gli elementi del albero DOM in modo che possiamo inserire per Javascript i diversi contenuti nel nostro modello.
Per raggiungere questi obiettivi abbiamo l'elemento "il" che si riferisce al nome del elemento DOM con cui abbiamo identificato la nostra parte della vista.
Quale è"?
Questo elemento è il componente centrale o proprietà della nostra visione, poiché è il riferimento al elemento DOM che è obbligatorio che le opinioni abbiano. Visualizzazioni utilizzare "il" come la proprietà con cui componiamo il contenuto e che poi procederà ad essere inserita nel DOM.
Ci sono due modi in cui possiamo associare a elemento DOM con la vista, il primo ne sta creando uno nuovo e lo aggiunge al DOM e al secondo sta facendo riferimento a uno esistente all'interno della pagina.
Creare un nuovo elementoSe vogliamo creare un nuovo elemento dobbiamo usare le proprietà: tagName, id e className, in questo modo il framework sarà incaricato di creare per noi il nuovo elemento e un riferimento a tale elemento sarà disponibile nella proprietà "il", nel caso in cui lasciassimo il tagName vuoto per impostazione predefinita verrà creato come div.
Vediamo il seguente codice dove possiamo apprezzare quanto appreso finora:

 var TasksView = Backbone.View.extend ({tagName: 'ul', // è obbligatorio ma se lo lasciamo vuoto viene preso come div className: 'container', // è facoltativo ma possiamo assegnare più classi id: 'attività', // opzionale}); var TasksView = new TasksView (); console.log (tasksView .el); // stamperà

Come possiamo vedere, creiamo una vista in modo basilare estendendo o ereditando da Backbone.View, poi con le proprietà citate assegniamo loro un valore, infine istanziamo e con a console.log() vediamo il risultato.
Nell'immagine seguente possiamo illustrare come appare nel nostro Console Chrome:

Qui vediamo come potremmo generare un elemento con l'etichetta

che avevamo specificato nella nostra view build.
Metodo SetElement
Questo metodo viene utilizzato quando vogliamo applicare la vista a un diverso elemento DOM già esistente, quindi creerà un nuovo riferimento $ il, che non sarà attaccato all'elemento originale ma punterà a quello nuovo, tutto questo a seconda dell'evento che chiamiamo.
Vediamo nel codice seguente come applichiamo questo:


 // Creiamo due elementi DOM che rappresentano i pulsanti var button1 = $ (''); var pulsante2 = $ (''); // Definiamo una nuova vista var View = Backbone.View.extend ({events: {click: function (e) {console.log (view.el === e.target);}}}); // Creiamo un'istanza della vista e la applichiamo all'elemento button1 // a button1 var view = new View ({el: button1}); // Adesso applichiamo la vista all'elemento button2 con il metodo setElement view.setElement (button2); button1.trigger ("clic"); button2.trigger ("clic"); 


Questo dovrebbe restituire un valore vero quando eseguiamo l'evento sul elemento pulsante2 Dato che la vista è stata modificata su di essa, vediamo l'immagine che fa riferimento a quanto spiegato sopra per completare il tutorial:




Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo