Introduction rapide à dbind

ReneRubalcava

<\/HEAD>

<\/P>

Alors, tous les enfants cool du quartier ont le data binding. Vous pouvez le faire dans Angular<\/A>, React<\/A>, ou Ember<\/A>. Dans chacun de ces cas, vous obtenez simplement le data binding au DOM prêt à l'emploi. Dojo ne fonctionne pas tout à fait de cette façon. Vous pouvez certainement le faire avec un peu de travail en utilisant Stateful watch <\/A> et en mettant à jour le DOM lorsque les données changent. Si vous utilisez des dijits, vous pouvez définitivement lier aux Stores et vous obtenez des mises à jour<\/A>, mais qu'en est-il avec les éléments DOM classiques<\/EM>.<\/P><\/P>C'est là qu'intervient quelque chose comme dbind<\/A>. dbind appartient à la catégorie que j'aime appeler packages compatibles Dojo<\/EM>. Cela signifie qu'il a été écrit pour fonctionner avec Dojo, principalement comme projets parallèles d'un contributeur Dojo. Certains d'entre eux sont devenus des projets complets sous SitePen<\/A>. Un exemple récent serait dstore<\/A>.<\/P>

<\/P>

Se faire attacher<\/H2>Alors, qu'apporte dbind ? J'ai déjà parlé de certaines utilisations dans cet article<\/A> et même des utilisations avancées dans cet article<\/A>. Ce que dbind vous permet de faire dans sa forme la plus simple, c'est de surveiller les changements sur un objet et de lier ces changements à autre chose<\/EM>. Par exemple, peut-être voulez-vous lier un élément texte dans votre application à l'activité sur votre carte. Vous pourriez faire quelque chose comme ceci pour lier à l'événement mouse-move de la carte.<\/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>

Vous pouvez voir un exemple de cela en action

ici<\/'A>.<\/'P>

<\/'P>

Comme vous pouvez le voir, vous pouvez lier des éléments DOM aux changements sur un objet<\/'EM>, et dans ce cas, lorsque vous déplacez votre souris sur la carte, le texte dans l'élément change. C'est vraiment cool maintenant<\/'STRONG>. Cependant, les coordonnées semblent être un peu trop précises<\/'EM>, vos utilisateurs n'ont pas besoin d'un tel niveau de détail, donc vous pouvez utiliser dbind pour lier ces changements à une fonction<\/'EM> puis lier le DOM aux résultats de cette fonction<\/'EM>. Ça semble confus ? C'est juste un changement dans ce code que vous pouvez faire comme ceci.<\/'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>Vous pouvez voir cet exemple

ici<\/'A>.<\/'P>

<\/'P>

Plus d'outils dans votre boîte à outils<\/'H2>Comme vous pouvez le voir, dbind peut être très utile dans le développement de votre application. Peut-être que vous vous êtes retrouvé à dépendre de la surveillance des changements sur un objet Stateful et beaucoup de code répétitif pour accomplir ce que vous pensez être une tâche simple. dbind peut aider avec cela. Considérez dbind comme un autre outil dans votre boîte à outils. Alors lisez-en un peu plus<\/'A> et voyez s'il peut vous être utile. J'ai réussi à faire des choses assez cool en utilisant dbind avec dojo/topic<\/'A>, donc je suis sûr que vous pouvez certainement trouver des utilisations pour cela.<\/'P>

<\/'P>

Pour plus d'astuces et conseils geodev, consultez

mon blog<\/'A>.<\/'P><\/'BODY><\/'HTML>