HTML die aurelia.io -Art verlängern

Key Takeaways

• aurelia.io, ein modernes JavaScript -Framework, ermöglicht es Entwicklern, benutzerdefinierte Elemente und Attribute in HTML zu erstellen, wodurch die Flexibilität und Funktionalität von Webanwendungen verbessert wird.
• benutzerdefinierte Attribute in Aurelia.io können verwendet werden, um vorhandene Plugins zu wickeln, Abkürzungen für gemeinsame Bindungen bereitzustellen oder vorhandene HTML -Elemente ohne direkten Codezugriff zu ändern. Dies erleichtert es einfacher, vorhandenen Elementen neue Funktionen hinzuzufügen.
• Um neue Elemente in Aurelia.io zu erstellen, beinhaltet die Definition einer Klasse für das Element und eine Ansicht für seine HTML -Darstellung. Dies ermöglicht die Erstellung völlig neuer Elemente mit benutzerdefiniertem Verhalten und Struktur, Verbesserung der Code -Wiederverwendung und des modularen Designs.
• aurelia Es bietet auch Kompatibilität mit anderen JavaScript -Bibliotheken und Frameworks, was eine größere Flexibilität bei der Webentwicklung ermöglicht.

Das Unterrichten des alten Hundes HTML New Tricks ist ein wichtiger Schwerpunkt der heutigen modernen JavaScript -Frameworks. Wenn Sie potenzielle Standards wie WebComponents, Erstellen benutzerdefinierter Richtlinien oder durch Erweiterung vorhandener Klassen befolgen, besteht die Chancen, dass Ihr Framework der Wahl die Möglichkeit bietet, das Markup von HTML selbst zu erweitern. In einem früheren Artikel, der von Brad Barrow geschrieben wurde, wurden Sie einem neuen Spieler vorgestellt: Aurelia. In diesem Artikel wird auf Brads Artikel und Code aufgebaut und Ihnen angezeigt, wie Sie benutzerdefinierte Elemente sowie benutzerdefinierte Attribute erstellen, indem Sie die Konventionen von Aurelia folgen.

Der vollständige Code für diesen Artikel finden Sie in unserem Github -Repo und Sie können eine Demo von dem sehen, was wir hier erstellen werden (bitte erlauben Sie etwas Zeit, damit die App initialisieren kann).

Warum das Bedürfnis nach mehr Markup?

Bevor Sie direkt in die Aktion springen, verstehen wir zunächst den potenziellen Anwendungsfall für das Erstellen neuer Komponenten. Dazu werden wir uns das einleitende Beispiel konzeptionell ansehen, wie in der folgenden Abbildung gezeigt. Wir haben zwei Seiten, die durch ein ViewModel (VM) und eine Ansicht dargestellt werden, die lustige Bilder und GIF -Videos zeigen. Jede von diesen hat eine wiederholte Liste, die selbst Beiträge mit einem Bild und einem Textblock erstellt.

Aurelia Reddit Client -Konzeptdiagramm

Wenn wir uns die Ansicht ansehen, können wir diese Datenerfassung sowie das Rendering in einem VM/View -Paar eng gekoppelt sind.

<span><span><span><template>></template></span>
</span>  <span><span><span><ul> class<span>="list-group"</span>></ul></span>
</span>    <span><span><span><li> class<span>="list-group-item"</span> repeat.for<span>="p of posts"</span>></li></span>
</span>      <span><span><span><img  alt="HTML die aurelia.io -Art verlängern" > src.bind<span>="p.data.thumbnail"</span> /></span>
</span>      <span><span><span><a> href<span>="http://reddit.com${p.data.permalink}"</span>></a></span>
</span>        ${p.data.title}
      <span><span><span></span>></span>
</span>    <span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span>

Dies ist möglicherweise kein Problem mit einem einfachen Beispiel, kann aber zu einem wichtigen Nachteil werden, wenn das System wächst und immer mehr Anforderungen gesammelt werden.

Verbesserung vorhandener Elemente mit benutzerdefinierten Attributen

Stellen Sie sich vor, wir erhalten eine Anfrage, um einen Popover für jede der lustigen Seiten zu bieten. Zu diesem Zweck könnten wir die Feature von Bootstrap leicht direkt in das Markup verkabeln, indem wir die erforderlichen Datenattribute platzieren, gefolgt von einer Initialisierung in unserem FunnyVM. Aber was ist, wenn wir es plötzlich auch auf der anderen Seite tun müssen? Die Bereitstellung der Funktion durch die Erklärung eines benutzerdefinierten Attributs kann unser Leben erheblich erleichtern. Diese sind besonders nützlich bei den folgenden Szenarien:

• vorhandene Plugins
einwickeln
• Verknüpfungen für gemeinsame Bindungen wie Stil oder Klasse
• Änderung vorhandener HTML -Elemente / benutzerdefinierten Elemente ohne direkten Codezugriff

Lassen Sie uns jetzt die Hände schmutzig machen und sehen, was es braucht, um unser erstes benutzerdefiniertes Attribut zu erstellen.

Erstellen des Popover

Beginnen wir zunächst, was wir erreichen möchten. Das neue Attribut -Popover sollte Parameter für die Platzierung, den Titel und den Inhalt des Popovers akzeptieren. Die Platzierung ist nach rechts festgelegt, sodass eine einfache Zeichenfolge als Wert ausreicht. Für die beiden anderen Eigenschaften werden wir die Datenbindung von Aurelia verwenden, um die iterierten Werte abzubilden. Um die Datei zu laden, verwenden wir die Require -Funktion von Aurelia. Das aus Attribut enthält den relativen Pfad zur importierten Ressource.

<span><span><span><template>></template></span>
</span>  <span><span><span><ul> class<span>="list-group"</span>></ul></span>
</span>    <span><span><span><li> class<span>="list-group-item"</span> repeat.for<span>="p of posts"</span>></li></span>
</span>      <span><span><span><img  alt="HTML die aurelia.io -Art verlängern" > src.bind<span>="p.data.thumbnail"</span> /></span>
</span>      <span><span><span><a> href<span>="http://reddit.com${p.data.permalink}"</span>></a></span>
</span>        ${p.data.title}
      <span><span><span></span>></span>
</span>    <span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span>

Um dies zu erreichen, erstellen wir zunächst eine neue JavaScript -Datei im SRC -Ordner namens popover.js. Das benutzerdefinierte Attribut ist wie alle anderen Aurelia -Konstrukte eher eine einfache exportierte ES6 -Klasse als eine Sammlung von Funktionen, die in eine vordefinierte API übergeben wurden (wie viele Legacy -Frameworks).

<span><span><span><require> from<span>="./popover"</span>></require></span><span><span></span>></span>    
</span>...
<span><span><span><img  alt="HTML die aurelia.io -Art verlängern" > src.bind<span>="p.data.thumbnail"</span>
</span></span><span>     <span>popover<span>="placement: 'right';
</span></span></span><span><span>              title.bind: p.data.url;
</span></span><span><span>              content.bind: p.data.title<span>"</span> /></span></span></span></span>

im Vergleich zu anderen Frameworks erklärt Aurelia Konstrukte, indem sie sie über Metadaten beschreibt. Anstatt statische Funktionen oder komplizierte APIs zu verwenden, nutzt Aurelia die modernsten ES7 -Dekorateure, um dies zu erreichen. Wir werden die notwendigen Dekorateure aus dem Paket Aurelia-Framework importieren. Was die Kontrolle selbst betrifft, verwenden wir die von Twitter Bootstrap bereitgestellte Popover -JavaScript -Steuerung. Deshalb importieren wir den Jquery -Handwerk $ $ und Bootstrap, um den JavaScript -Code von Bootstraps zu initialisieren.

Der nächste Schritt besteht darin, die zuvor erwähnten Metadaten so anzuwenden, dass Aurelia weiß, was er bekommt, wenn sie die Datei lädt. Durch das Anbringen des Customattribute Decorators nennen wir unsere Komponente mit dem angegebenen Wert. Der bindbare Dekorateur dagegen erklärt eine Eigenschaft, an die unsere Ansicht binden kann. Wir wiederholen diesen Dekorator einfach für jede verfügbare Eigenschaft.

<span>import <span>{customAttribute, bindable, inject}</span> from 'aurelia-framework';
</span><span>import $ from 'bootstrap';
</span><span>import bootstrap from 'bootstrap';
</span><span>...</span>

Der erste Injektionsdekorator kümmert sich um das tatsächliche DOM -Element als Parameter für unsere Konstruktormethode, die dann für die spätere Verwendung gespeichert wird.

<span><span><span><template>></template></span>
</span>  <span><span><span><ul> class<span>="list-group"</span>></ul></span>
</span>    <span><span><span><li> class<span>="list-group-item"</span> repeat.for<span>="p of posts"</span>></li></span>
</span>      <span><span><span><img  alt="HTML die aurelia.io -Art verlängern" > src.bind<span>="p.data.thumbnail"</span> /></span>
</span>      <span><span><span><a> href<span>="http://reddit.com${p.data.permalink}"</span>></a></span>
</span>        ${p.data.title}
      <span><span><span></span>></span>
</span>    <span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span>

Jetzt, da wir alle notwendigen Informationen haben, können wir uns für den Lebenszyklus des Verhaltens entscheiden, indem wir eine Methode namens Bind deklarieren. Dies stellt sicher, dass wir die Komponente am richtigen Timing initialisieren, vergleichbar mit der Ready -Methode von JQuery.

<span><span><span><require> from<span>="./popover"</span>></require></span><span><span></span>></span>    
</span>...
<span><span><span><img  alt="HTML die aurelia.io -Art verlängern" > src.bind<span>="p.data.thumbnail"</span>
</span></span><span>     <span>popover<span>="placement: 'right';
</span></span></span><span><span>              title.bind: p.data.url;
</span></span><span><span>              content.bind: p.data.title<span>"</span> /></span></span></span></span>

Zu guter Letzt fügen wir die geänderten Handler hinzu. Beachten Sie, dass diese in unserem Beispiel nicht tatsächlich ausgeführt werden, da sich die Bindungsquelle im Laufe der Zeit nicht ändert.

<span>import <span>{customAttribute, bindable, inject}</span> from 'aurelia-framework';
</span><span>import $ from 'bootstrap';
</span><span>import bootstrap from 'bootstrap';
</span><span>...</span>

Die vollständige Datei auf GitHub

anzeigen

Jetzt, da wir gesehen haben, wie Sie neue Funktionen hinzufügen können, indem Sie vorhandenen Elementen Attribute bereitstellen, gehen wir weiter und schreiben Sie unsere eigenen benutzerdefinierten Elemente.

Erstellen Sie neue Tags mit benutzerdefinierten Elementen

Um völlig neue Elemente zu erstellen, nutzt Aurelia einen sehr ähnlichen Ansatz für benutzerdefinierte Attribute. Als Beispiel werden wir die Beiträge der GIF-Seite neu aufbauen, die durch ein benutzerdefiniertes Element namens Reddit-GIF dargestellt werden, und bieten die Möglichkeit, das tatsächliche Video ein- und auszuschalten. Das resultierende Markup für unsere Ansicht sollte Folgendes sein:

@<span>inject(Element)
</span>@<span>customAttribute('popover')
</span>@<span>bindable('title')
</span>@<span>bindable('content')
</span>@<span>bindable('placement')
</span><span>export class Popover {
</span><span>...</span>

Wie Sie sehen können, verwenden wir das neue Tag und geben die erforderlichen Informationen über Datenbindungen für die Dateneigenschaft an.

Der nächste Schritt besteht darin, das eigentliche Element zu erstellen. Wir tun dies, indem wir die Ansicht des Elements reddit-gif.html und seine vm reddit-gif.js im Ordner src erstellen. Die als nächstes gesehene Ansicht nutzt das vorherige Markup von gifs.html und fügt eine Schaltfläche hinzu, mit der ein Iframe umschaltet, mit dem das tatsächliche Video eingebettet wird. Auch hier sind die Ansichten von Aurelia in ein Vorlagen -Tag eingewickelt:

<span>constructor(element) {
</span>  <span>this.element = element;
</span><span>}</span>

Wenn wir uns den VM -Teil ansehen, folgen wir einem ähnlichen Prozess wie beim Erstellen eines benutzerdefinierten Attributs. Aber diesmal nutzen wir einen anderen Dekorateur, der Aurelia mitteilt, dass wir ein Customelement mit nur einer Eigenschaft namens Daten erstellen werden.

<span>bind() {
</span>  <span>// initialize the popover
</span>  <span>$(this.element).popover({ 
</span>    <span>title: this.title,
</span>    <span>placement: this.placement,
</span>    <span>content: this.content,
</span>    <span>trigger: 'hover' });
</span><span>}</span>

Als nächstes definieren wir ein gifaktives Mitglied, um zu verfolgen, ob der Iframe angezeigt werden soll. Wir haben das GIFSRC-Mitglied zunächst auf leeren gesetzt, um keinen Inhalt vorzuladen, wenn der Iframe unsichtbar ist.

<span>titleChanged(newValue){
</span>  <span>$(this.element).data('bs.popover').options.title = newValue;
</span><span>}
</span>
<span>contentChanged(newValue){
</span>  <span>$(this.element).data('bs.popover').options.content = newValue;
</span><span>}
</span>
<span>placementChanged(newValue){
</span>  <span>$(this.element).data('bs.popover').options.placement = newValue;
</span><span>}</span>

Zu guter Letzt fügen wir die ToggleGIF -Funktion hinzu, die von der Schaltfläche Umschaltungen verwendet wird, die die Sichtbarkeit und Quelle für jeden Aufruf umgeht.

<span><span><span><require> from<span>="./reddit-gif"</span>></require></span><span><span></span>></span>
</span>...
<span><span><span><ul> class<span>="list-group"</span>></ul></span>
</span>    <span><span><span><li> class<span>="list-group-item"</span> repeat.for<span>="p of posts"</span>></li></span>
</span>      <span><span><span><reddit-gif> data.bind<span>="p.data"</span>></reddit-gif></span><span><span></span>></span>
</span>    <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span>

Sie können die vollständige HTML -Datei hier und die JS -Datei hier anzeigen

Reduzierung der Codemenge mit Konventionen

Bei

Aurelia geht es darum, das Entwicklererlebnis so angenehm wie möglich zu machen. Seien wir ehrlich, die Wahrheit: Viele von uns möchten nicht viel tippen. Um Ihnen also einige wertvolle Tastenanschläge zu sparen und die Wartung im Laufe der Zeit zu verbessern, verwendet Aurelia eine Reihe einfacher Konventionen. Zum Beispiel könnte die Vollversion eines bindbaren Dekorators tatsächlich so aussehen, was wir nur durch die Angabe des Eigenschaftsnamens herumgearbeitet haben. Alle anderen Optionen werden automatisch abgeleitet.

<span><span><span><template>></template></span>
</span>  <span><span><span><ul> class<span>="list-group"</span>></ul></span>
</span>    <span><span><span><li> class<span>="list-group-item"</span> repeat.for<span>="p of posts"</span>></li></span>
</span>      <span><span><span><img  alt="HTML die aurelia.io -Art verlängern" > src.bind<span>="p.data.thumbnail"</span> /></span>
</span>      <span><span><span><a> href<span>="http://reddit.com${p.data.permalink}"</span>></a></span>
</span>        ${p.data.title}
      <span><span><span></span>></span>
</span>    <span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span>

Eine andere Sache, die Sie betrachten sollten, ist, wie Sie die Verwendung mehrerer Eigenschaften verkürzen können. Anstatt jeden von ihnen nacheinander zu definieren, können wir auch unser benutzerdefiniertes Attribut erkennen, dass sie dynamische Eigenschaften erwarten. Um dies zu tun, dekorieren wir unsere Klasse mit dem Dynamikptionsdekorator. Jetzt können wir immer noch die gleiche Ansichts -Markup wiederverwenden, müssen aber nicht alle Eigentumsdeklarationen manuell definieren, was, wie der Name schon sagt, in dynamischen Kontexten sehr hilfreich ist. Dies bedeutet

<span><span><span><require> from<span>="./popover"</span>></require></span><span><span></span>></span>    
</span>...
<span><span><span><img  alt="HTML die aurelia.io -Art verlängern" > src.bind<span>="p.data.thumbnail"</span>
</span></span><span>     <span>popover<span>="placement: 'right';
</span></span></span><span><span>              title.bind: p.data.url;
</span></span><span><span>              content.bind: p.data.title<span>"</span> /></span></span></span></span>

Aber was ist mit benutzerdefinierten Elementen? Nun, wir haben implizit einige Konventionen verwendet, ohne es zu merken. Das System hat automatisch das Ansicht und das VM -Paar zusammengezogen, indem sie denselben Namen mit demselben Namen haben. Wenn Sie eine andere Ansicht verwenden müssen, können Sie den Dekorateur @useview (RelativePath) verwenden. Oder verwenden Sie überhaupt keine Ansicht, indem Sie @Noview deklarieren. Wir können sogar verrückt werden und unsere Ansicht im Schatten wiedergegeben werden, indem wir den Dekorateur Usshadowdom hinzufügen. Wenn Sie mit diesem Begriff nicht vertraut sind, werfen Sie bitte einen Blick auf diesen Artikel

Schlussfolgerung

Wir, das Aurelia -Team, hoffen, Ihnen einen kurzen Überblick darüber zu geben, wie Sie HTML selbst erweitern können, indem Sie benutzerdefinierte Elemente und Attribute nutzen. In den Beispielen hoffen wir, dass Sie in der Lage waren, uns auf Entwicklererfahrungen zu konzentrieren, indem Sie Ihnen ein flexibles und dennoch einfach zu verwendende Framework anbieten, das Ihnen nicht im Weg steht oder Sie eine seltsame API verwenden lässt. Wir möchten Sie einladen, sich unserem Gitter -Kanal anzuschließen, wenn Sie Fragen haben. Wir würden auch gerne von Ihren Erfahrungen hören, während Sie Ihre ersten benutzerdefinierten Elemente und Attribute schreiben.

häufig gestellte Fragen (FAQs) zur Erweiterung von HTML mit Aurelia.io

Was ist Aurelia.io und wie erweitert es HTML? Es erweitert HTML, indem Entwickler benutzerdefinierte HTML -Elemente erstellen, vorhandenen HTML -Elementen benutzerdefinierte Attribute hinzufügen und den Fluss des HTML -Renderings steuern. Dies wird durch die leistungsstarke Templating -Engine von Aurelia erreicht, die benutzerdefinierte Elemente und Attribute interpretiert und als Standard -HTML rendert. Dies ermöglicht dynamischere, interaktivere und komplexere Webanwendungen, während sauberer, lesbarer Code beibehalten wird.

Wie vergleicht Aurelia.io mit anderen JavaScript -Frameworks? Im Gegensatz zu vielen Frameworks ist Aurelia.io als Sammlung von Zusammenarbeit Bibliotheken ausgelegt, was bedeutet, dass Sie so viel oder so wenig von dem Framework verwenden können, wie Sie benötigen. Es betont auch saubere, konventionelle Codierung und verringert die Menge des benötigten Boilerplate-Code. Darüber hinaus bedeutet das Engagement von Aurelia.io, Webstandards zu folgen Benutzerdefinierte Elemente in Aurelia.io beinhalten die Definition einer Klasse für das Element und eine Ansicht für seine HTML -Darstellung. Die Klasse enthält die Logik für das Element, während die Ansicht ihre HTML -Struktur definiert. Nach der Definition kann das benutzerdefinierte Element wie ein Standard -HTML -Element in jeder Anwendung von Aurelia.io verwendet werden. Dies ermöglicht die Wiederverwendung von Code und das modulare Design, wodurch Ihre Anwendungen einfacher zu entwickeln und zu warten. IO ist eine Möglichkeit, vorhandenen HTML -Elementen benutzerdefiniertes Verhalten hinzuzufügen. Sie sind in ähnlicher Weise wie benutzerdefinierte Elemente mit einer Klasse für die Logik des Attributs und eine Ansicht für die HTML -Darstellung definiert. Einmal definiert, kann das benutzerdefinierte Attribut zu jedem HTML -Element in einer aurelia.io -Anwendung hinzugefügt werden, wobei seine Funktionalität erweitert wird, ohne ein ganz neues Element zu erstellen.

aurelia.io unterstützt die bidreihige Datenbindung, was bedeutet, dass Änderungen im Modell automatisch die Ansicht aktualisieren und umgekehrt. Dies wird durch das Observierbarkeitssystem von Aurelia.io erreicht, das Änderungen an Daten verfolgt und die relevanten Teile der Ansicht aktualisiert. Dies erleichtert einfach, dynamische, interaktive Anwendungen zu erstellen, bei denen die Benutzeroberfläche immer den aktuellen Status der Daten widerspiegelt. .IO ist so konzipiert, dass er mit anderen JavaScript -Bibliotheken und Frameworks kompatibel ist. Es verwendet eine modulare Architektur, dh Sie können auswählen, welche Teile des Frameworks verwendet werden sollen. Dies erleichtert es einfach, Aurelia.io in vorhandene Projekte zu integrieren oder andere Bibliotheken und Frameworks neben Aurelia.io zu verwenden. Enthält einen leistungsstarken Router, der komplexe Navigationsszenarien ermöglicht. Der Router unterstützt unter anderem verschachtelte Routen, optionale Parameter und dynamische Routen. Dies erleichtert einfach, einseitige Anwendungen mit aurelia.io zu erstellen, bei der der Benutzer zwischen verschiedenen Ansichten navigieren kann, ohne die Seite zu aktualisieren.

Was ist die Lernkurve für Aurelia.io? Wenn Sie mit JavaScript und HTML vertraut sind, sollten Sie Aurelia.io schnell abholen können. Die Dokumentation des Frameworks ist umfassend und enthält viele Beispiele, mit denen Sie beginnen können. Zuverlässigkeit und Leistung. Es verwendet eine Kombination aus Unit-Tests, Integrationstests und End-to-End-Tests, um alle Aspekte des Frameworks abzudecken. In Bezug auf die Leistung ist Aurelia.io schnell und effizient mit einem minimalen Fußabdruck und einer optimierten Renderung ausgelegt.

Welche Art von Unterstützung und Community hat Aurelia.io? IO hat eine lebendige und aktive Gemeinschaft von Entwicklern, die zum Rahmen beitragen und sich gegenseitig unterstützen. Es stehen zahlreiche Ressourcen zur Verfügung, darunter ein Community -Forum, ein Gitter -Chatraum und ein Stack -Überlauf -Tag. Darüber hinaus bietet das Team von Aurelia.io professionelle Unterstützung und Schulungsdienste.

Das obige ist der detaillierte Inhalt vonHTML die aurelia.io -Art verlängern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!