Quick intro to dbind

[ReneRubalcava]

So all the cool kids on the block have data binding.You can do it in Angular, React, or Ember. In each of these cases you just kind of get data binding to the DOM out of the box. Dojo doesn't quite work that way. You can do it for sure with a little work by using Stateful watch and updating the DOM when data changes. If you are using dijits, you can definitely bind to Stores and you get updates, but how about with regular old DOM elements.

That's where something like dbind comes into play. dbind falls into the category I like to refer to as Dojo friendly packages. Meaning it was written to work with Dojo, mainly as side projects of a Dojo contributor. Some of these have become full blown projects under SitePen. A recent example would be dstore.

Getting tied up

So what does dbind bring to the table? I've talked about some uses before in this post and even some advanced uses in this post. What dbind, in it's simplest form lets you do is watch for changes on an object and bind those changes to something else. For example, maybe you want to bind some text element in your application to activity on your map. You could do something like this to bind to the mouse-move event of the map.

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 = 'http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5'...
  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);
  });
});

You could see a sample of this in action here.

As you can see, you can bind DOM elements to changes on an object, and in this case, as you move your mouse around the map, the text in the element changes. Now that's pretty cool. The coordinates however seem to be a little too accurate, your users don't need that level of detail, so you can use dbind to bind those changes to a function and then bind the DOM to the results of that function. Sound confusing? It's just one change to this code you can do like this.

  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);
    }
  });

You can see this sample here.

More tools in your toolkit

As you can see, dbind can come in pretty handy in your application development. Maybe you have found yourself relying on watching for changes on a Stateful object and lots of boilerplate to accomplish what you think should be a simple task. dbind can help with that. Consider dbind just another tool in your toolkit. So read up on it a bit and see if it will prove useful for you. I've managed to do some pretty cool stuff using dbind with dojo/topic, so I'm sure you can definitely find some uses for it.

For more geodev tips and tricks, check out my blog.