<\/P>
Ich habe kürzlich einen Blogbeitrag<\/A> über die Verwendung von Polymer<\/A> mit der ArcGIS API for JavaScript 4.0 beta<\/A> geschrieben.<\/P><\/P>Mehr über Web Components kannst du hier<\/A> und hier<\/A> lesen.<\/P><\/P>Web Components sind großartig, weil man so etwas in deinem HTML machen kann.<\/P><\/P><body> <my-awesome-component><\/my-awesome-component><\/body><\/PRE><\/P>Und <my-awesome-component> könnte ein großartiges Benutzeroberflächenelement sein!<\/P><\/P>Klingt super, oder? Ja, Web Components werden noch nicht in allen Browsern vollständig unterstützt. Aber keine Sorge, während Browser-Hersteller die Spezifikation und Details klären, können wir einfach großartige Bibliotheken wie Polymer<\/A> verwenden. Die meisten Bibliotheken wie Angular<\/A>, Ember<\/A>, React<\/A> und sogar Dojo Djits<\/A> bieten Komponenten irgendeiner Art.<\/P><\/P>Was ist also so toll an Polymer?<\/EM> Schauen wir uns eine einfache Komponente an, die wir verwenden wollen, um den aktuellen Extent der Karte anzuzeigen.<\/P><\/P><dom-module id="extent-info"> <template> <div class="extent-details well"> xmin: <span>{{xminc}}<\/span><br> ymin: <span>{{yminc}}<\/span><br> xmax: <span>{{xmaxc}}<\/span><br> ymax: <span>{{ymaxc}}<\/span><br> <\/div> <template> <style> .extent-details { margin: 1em; } <style> <script> var ExtentInfo = Polymer({ is: 'extent-info', properties: { xmin: Number, ymin: Number, xmax: Number, ymax: Number, xminc: { type: Number, computed: 'toFixed(2, xmin)' }, :& nbsp;xminc: { :& nbsp;xminc: { :& nbsp;xminc: { :& nbsp;xminc: { :& nbsp;xminc: { :& nbsp;xminc: {<\/> So schauen wir uns das mal an.<\/><\/><\/> Die Wurzel deiner Komponente ist ein dom-module<\/> mit einer id, die mit der id übereinstimmt, die dem Polymer<\/> Konstruktor gegeben wird. Dann haben wir einen template<\/> Abschnitt. Der template<\/> Abschnitt enthält die tatsächlichen DOM-Elemente deiner Komponente<\/>.<\/> Hier kannst du Attribute an deine Polymer-Komponente binden, indem du Mustache-Syntax {{bindingVariable}}<\/> verwendest. Diese gebundenen Variablen sind im Polymer-Konstruktor als properties<\/> definiert. In diesen Eigenschaften kannst du berechnete Eigenschaften<\/> definieren. Das bedeutet, dass diese Eigenschaften basierend auf anderen Eigenschaften berechnet werden<\/>., in diesem Fall zur Vereinfachung der Genauigkeit der Extent-Zahlen.<\/><\/><\/> Die Schönheit dieser Komponenten ist, dass du sie einfach aktualisierst, indem du die Attribute des DOM-Elements aktualisierst und die berechneten Eigenschaften den Rest erledigen.<\/><\/>class Component { constructor(data) { // Import-Link hinzufügen var href = require.toUrl('app/views/PolymerView/components/ExtentInfo.html'); var node = document.querySelector('.esriTop.esriRight'); var link = document.createElement('link'); link.setAttribute('href', href); link.setAttribute('rel', 'import'); document.body.appendChild(link); var el = document.createElement('extent-info'); node.appendChild(el); el.setAttribute('xmin', data.xmin) el.setAttribute('ymin', data.ymin) el.setAttribute('xmax', data.xmax) el.setAttribute('ymax', data.ymax) this.element = el; } update(data) { var el = this.element; el.setAttribute('xmin', data.xmin) el.setAttribute('ymin', data.ymin) el.setAttribute('xmax', data.xmax) el.setAttribute('ymax', data.ymax) } };export default Component;<\/><\/><\/> Jetzt ist der einfache Weg, dies mit der ArcGIS API for JavaScript 4.0 beta zu verwenden, die Verwendung von Accessors<\/>. Du kannst ein Model erstellen, das Accessor erweitert und den Extent definiert.<\/>import Accessor from 'esri/core/Accessor';import Extent from 'esri/geometry/Extent';class Model extends Accessor { classMetadata: { properties: { extent: { type: Extent } } }};export default Model;<\/><\/><\/> Da es ein Accessor<\/> ist, kannst du Änderungen am Model beobachten und die Werte der Komponente mit den Änderungen aktualisieren.<\/>import Model from './Model';import Component from './components/ViewProxy';// Controller verbindet Model und Viewclass Controller { constructor(extent) { this.model = new Model({ extent: extent }); this.view = new Component({ position: 'topright', xmin: this.model.extent.xmin, ymin: this.model.extent.ymin, xmax: this.model.extent.xmax, ymax: this.model.extent.ymax }); this.model.watch('extent', (val) => { this.view.update({ xmin: val.xmin, ymin: val.ymin, xmax: val.xmax, ymax: val.ymax }); }); }};xport default Controller;<\/><\/><\/> Das war's. Du kannst anfangen, viele wiederverwendbare Komponenten zu erstellen, die zusammengefügt werden können, um eine ganze Anwendung zu erstellen, wenn du möchtest.<\/><\/><\/> Es gibt derzeit ein Projekt namens esri-polymer<\/> auf GitHub von James Milner von Esri UK, das wirklich cool ist. Es basiert auf der aktuellen ArcGIS API for JavaScript 3.x, also keine Accessors, aber es hat genug Komponenten, um eine Anwendung zusammenzustellen, ohne JavaScript schreiben zu müssen.<\/><\/><\/> Das ist die Zukunft dessen, was in der Webentwicklung kommen wird, aber vergiss die Zukunft – du kannst diese Sachen jetzt schon machen.<\/><\/><\/> Für mehr geodev Tipps und Tricks, schau dir meinen Blog<\/> an.<\/><\\BODY><\\HTML>
Mehr über Web Components kannst du
Web Components sind großartig, weil man so etwas in deinem HTML machen kann.<\/P>
<body> <my-awesome-component><\/my-awesome-component><\/body><\/PRE><\/P>Und <my-awesome-component> könnte ein großartiges Benutzeroberflächenelement sein!<\/P><\/P>Klingt super, oder? Ja, Web Components werden noch nicht in allen Browsern vollständig unterstützt. Aber keine Sorge, während Browser-Hersteller die Spezifikation und Details klären, können wir einfach großartige Bibliotheken wie
Was ist also so toll an Polymer?<\/EM> Schauen wir uns eine einfache Komponente an, die wir verwenden wollen, um den aktuellen Extent der Karte anzuzeigen.<\/P><\/P><dom-module id="extent-info"> <template> <div class="extent-details well"> xmin: <span>{{xminc}}<\/span><br> ymin: <span>{{yminc}}<\/span><br> xmax: <span>{{xmaxc}}<\/span><br> ymax: <span>{{ymaxc}}<\/span><br> <\/div> <template> <style> .extent-details { margin: 1em; } <style> <script> var ExtentInfo = Polymer({ is: 'extent-info', properties: { xmin: Number, ymin: Number, xmax: Number, ymax: Number, xminc: { type: Number, computed: 'toFixed(2, xmin)' }, :& nbsp;xminc: { :& nbsp;xminc: { :& nbsp;xminc: { :& nbsp;xminc: { :& nbsp;xminc: { :& nbsp;xminc: {<\/> So schauen wir uns das mal an.<\/><\/><\/> Die Wurzel deiner Komponente ist ein dom-module<\/> mit einer id, die mit der id übereinstimmt, die dem Polymer<\/> Konstruktor gegeben wird. Dann haben wir einen template<\/> Abschnitt. Der template<\/> Abschnitt enthält die tatsächlichen DOM-Elemente deiner Komponente<\/>.<\/> Hier kannst du Attribute an deine Polymer-Komponente binden, indem du Mustache-Syntax {{bindingVariable}}<\/> verwendest. Diese gebundenen Variablen sind im Polymer-Konstruktor als properties<\/> definiert. In diesen Eigenschaften kannst du
import Accessor from 'esri/core/Accessor';import Extent from 'esri/geometry/Extent';class Model extends Accessor { classMetadata: { properties: { extent: { type: Extent } } }};export default Model;<\/><\/><\/> Da es ein
import Model from './Model';import Component from './components/ViewProxy';// Controller verbindet Model und Viewclass Controller { constructor(extent) { this.model = new Model({ extent: extent }); this.view = new Component({ position: 'topright', xmin: this.model.extent.xmin, ymin: this.model.extent.ymin, xmax: this.model.extent.xmax, ymax: this.model.extent.ymax }); this.model.watch('extent', (val) => { this.view.update({ xmin: val.xmin, ymin: val.ymin, xmax: val.xmax, ymax: val.ymax }); }); }};xport default Controller;<\/><\/><\/> Das war's. Du kannst anfangen, viele wiederverwendbare Komponenten zu erstellen, die zusammengefügt werden können, um eine ganze Anwendung zu erstellen, wenn du möchtest.<\/><\/><\/> Es gibt derzeit ein Projekt namens
Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registrieren Sie ein kostenloses Konto.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
