Kurze Einführung in dbind

ReneRubalcava

<\/HEAD>

<\/P>

Also haben alle coolen Kids in der Nachbarschaft Datenbindung. Du kannst es in Angular<\/A>, React<\/A> oder Ember<\/A> machen. In jedem dieser Fälle erhältst du Datenbindung zum DOM quasi direkt out of the box. Dojo funktioniert nicht ganz so. Du kannst es auf jeden Fall mit etwas Arbeit machen, indem du Stateful watch<\/A> verwendest und das DOM aktualisierst, wenn sich Daten ändern. Wenn du dijits benutzt, kannst du definitiv an Stores binden und erhältst Updates<\/A>, aber wie sieht es mit gewöhnlichen alten DOM-Elementen<\/EM> aus.<\/P><\/P>Hier kommt etwas wie dbind<\/A> ins Spiel. dbind fällt in die Kategorie, die ich gerne als Dojo-freundliche Pakete<\/EM> bezeichne. Das bedeutet, es wurde geschrieben, um mit Dojo zu arbeiten, hauptsächlich als Nebenprojekte eines Dojo-Mitwirkenden. Einige davon sind zu vollwertigen Projekten unter SitePen<\/A> geworden. Ein aktuelles Beispiel wäre dstore<\/A>.<\/P>

<\/P>

Verknüpfungen herstellen<\/H2>Was bringt dbind also auf den Tisch? Ich habe einige Verwendungen bereits in diesem Beitrag<\/A> und sogar einige fortgeschrittene Anwendungen in diesem Beitrag<\/A> besprochen. Was dbind in seiner einfachsten Form ermöglicht, ist, auf Änderungen an einem Objekt zu achten und diese Änderungen an etwas anderes zu binden<\/EM>. Zum Beispiel möchtest du vielleicht ein Textelement in deiner Anwendung an Aktivitäten auf deiner Karte binden. Du könntest so etwas machen, um an das Mausbewegungsereignis der Karte zu binden.<\/P><\/P>require([
  "dojo\/_base\/_declare",
  "dojo\/_dom",
  "dijit\/_WidgetBase",
  "dijit\/_TemplatedMixin",
  "dbind\/_bind",
  "esri\/_map",
  "esri\/_layers\/_FeatureLayer",
  "dojo\/_domReady!"
], function(
    declare, dom, _WidgetBase, _TemplatedMixin,
    bind,
    Map, FeatureLayer
) {
  var map = new Map("map-div", {
    center: [-118, 34.5],
    zoom: 5,
    basemap: "topo"
  });
  var url = '<\/'SPAN>http:\/\/sampleserver1.arcgisonline.com\/ArcGIS\/rest\/services\/Demographics\/ESRI_Census_USA\/MapServer\/5';<\/'A>
  var layer = new FeatureLayer(url, { outFields: ['*'] });
  map.addLayer(layer);
  var template = '<div class=\"label-container\"><div>X: <span data-dojo-attach-point=\"xNode\">${x}<\/'div><div>Y: <span data-dojo-attach-point=\"yNode\">${y}<\/'div><\/'div>';
  var LabelContainer = declare([_WidgetBase, _TemplatedMixin], {
    templateString: template,
    constructor: function() {
      this.set('x', 0);
      this.set('y', 0);
    },
    postCreate: function() {
      bind(this.xNode).to(this, 'x');
      bind(this.yNode).to(this, 'y');
    }
  });
  var lblContainer = new LabelContainer(null, dom.byId('lbl-div'));
  map.on('mouse-move', function(e) {
    lblContainer.set('x', e.mapPoint.x);
    lblContainer.set('y', e.mapPoint.y);
  });
});<\/'PRE>

Du kannst ein Beispiel davon in Aktion

hier<\/'A> sehen.<\/'P>

<\/'P>

Wie du siehst, kannst du DOM-Elemente an Änderungen eines Objekts binden<\/'EM>, und in diesem Fall ändert sich der Text im Element, während du deine Maus über die Karte bewegst. Das ist wirklich cool<\/'STRONG>. Die Koordinaten scheinen jedoch ein wenig zu genau<\/'EM> zu sein, deine Benutzer brauchen dieses Detailniveau nicht, also kannst du dbind verwenden, um diese Änderungen an eine Funktion zu binden<\/'EM> und dann das DOM an die Ergebnisse dieser Funktion zu binden<\/'EM>. Klingt verwirrend? Es ist nur eine Änderung an diesem Code, die du so machen kannst.<\/'P><\/'P>  var fixed3 = function fixed3(n) {
    return n.toFixed(3);
  };
  var LabelContainer = declare([_WidgetBase, _TemplatedMixin], {
    templateString: template,
    constructor: function() {
      this.set('x', 0);
      this.set('y', 0);
    },
    postCreate: function() {
      var roundX = bind(fixed3).to(this, 'x');
      var roundY = bind(fixed3).to(this, 'y');
      bind(this.xNode).to(roundX);
      bind(this.yNode).to(roundY);
    }
  });<\/'PRE>Du kannst dieses Beispiel

hier<\/'A> sehen.<\/'P>

<\/'P>

Mehr Werkzeuge in deinem Werkzeugkasten<\/'H2>Wie du siehst, kann dbind bei der Anwendungsentwicklung sehr nützlich sein. Vielleicht hast du dich schon dabei erwischt, dass du darauf angewiesen bist, Änderungen an einem Stateful-Objekt zu beobachten und viel Boilerplate-Code schreiben musstest, um etwas zu erreichen, das eigentlich eine einfache Aufgabe sein sollte. dbind kann dabei helfen. Betrachte dbind einfach als ein weiteres Werkzeug in deinem Werkzeugkasten. Also informiere dich ein wenig darüber<\/'A> und schau nach, ob es für dich nützlich sein könnte. Ich habe einige ziemlich coole Sachen gemacht mit dbind mit dojo/topic<\/'A>, also bin ich sicher, dass auch du definitiv einige Verwendungen dafür finden kannst.<\/'P>

<\/'P>

Für mehr geodev Tipps und Tricks schau dir

meinen Blog<\/'A> an.<\/'P><\/'BODY><\/'HTML>