Backbone.js - El Element

Im Moment wissen wir, dass die Ansichten in Backbone.js Sie arbeiten mit der Logik, wie wir die mit dem Modell strukturierten Informationen präsentieren, es stellt sich die Frage, wie wir dies in unserer Anwendung ausdrücken, was wir tun, ist mit den Elementen der DOM-Baum damit wir einfügen können von Javascript die verschiedenen Inhalte in unserer Vorlage.
Um diese Ziele zu erreichen, haben wir das Element "das" was sich auf den Namen des DOM-Element mit denen wir unseren Teil des Sehens identifiziert haben.
Was ist der"?
Dieses Element ist die zentrale Komponente oder Eigenschaft unserer Sicht, da es den Bezug auf die DOM-Element dass es zwingend erforderlich ist, dass die Ansichten haben. Aufrufe verwenden "das" als die Eigenschaft, mit der wir den Inhalt erstellen und die dann in das DOM eingefügt wird.
Es gibt zwei Möglichkeiten, wie wir a associate assoziieren können DOM-Element mit dem Anblick, der erste erstellt ein neues und fügt es dem DOM hinzu und die zweite verweist auf eine vorhandene innerhalb der Seite.
Erstellen eines neuen ElementsWenn wir ein neues Element erstellen möchten, müssen wir die Eigenschaften verwenden: tagName, id und className, auf diese Weise übernimmt das Framework die Erstellung des neuen Elements für uns und ein Verweis auf dieses Element wird in der verfügbar sein Eigentum "der", für den Fall, dass wir die Verlinke den Namen leer wird standardmäßig als div erstellt.
Sehen wir uns den folgenden Code an, in dem wir das bisher Gelernte schätzen können:

 var TasksView = Backbone.View.extend ({tagName: 'ul', // ist erforderlich, aber wenn wir es leer lassen, wird es als div className: 'container' genommen, // es ist optional, aber wir können mehrere Klassen id zuweisen: 'Aufgabe', // optional}); var TasksView = new TasksView (); console.log (tasksView .el); // wird drucken

Wie wir sehen, erstellen wir eine Ansicht auf einfache Weise, indem wir sie erweitern oder erben von Backbone.Ansicht, dann weisen wir ihnen mit den genannten Eigenschaften einen Wert zu, schließlich instanziieren wir und mit a Konsole.log () wir sehen das ergebnis.
Im folgenden Bild können wir veranschaulichen, wie das in unserem aussieht Chrome-Konsole:

Hier sehen wir, wie wir ein Element mit dem Label generieren könnten

die wir in unserem View-Build angegeben hatten.
SetElement-Methode
Diese Methode wird verwendet, wenn wir die Ansicht auf ein anderes bereits vorhandenes DOM-Element anwenden möchten, dann wird eine neue Referenz erstellt $ die, die nicht an das ursprüngliche Element angehängt wird, sondern auf das neue zeigt, dies alles abhängig von dem Ereignis, das wir aufrufen.
Sehen wir uns im folgenden Code an, wie wir dies anwenden:


 // Wir erstellen zwei DOM-Elemente, die Schaltflächen darstellen var button1 = $ (''); var-Taste2 = $ (''); // Wir definieren eine neue Ansicht var View = Backbone.View.extend ({events: {click: function (e) {console.log (view.el === e.target);}}}); // Wir erstellen eine Instanz der Ansicht und wenden sie auf das Element button1 // auf button1 an var view = new View ({el: button1}); // Jetzt wenden wir den View mit der Methode setElement auf das button2-Element an view.setElement (button2); button1.trigger ('klick'); button2.trigger ('klick'); 


Dies sollte einen wahren Wert zurückgeben, wenn wir das Ereignis auf dem ausführen button2 element Da die Ansicht geändert wurde, sehen wir uns das Bild an, das sich auf die oben erklärten bezieht, um das Tutorial abzuschließen:




Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben