dbind in your ArcGIS JS apps
Dojo has a lot of strength in it’s Dijit library. Dijits can be used to build very basic reusable user interfaces or wire together some very complicated interfaces. One example is that of FreeNAS which has a pretty extensive interface. You can get some good tips on building a custom widget here and here.
I hear you like widgets
When you build a widget, you would at minimum extend _WidgetBase. _WidgetBase also extends Stateful which allows you to use get/set methods in your widget. This also includes using a watch method that allows you to do something when a value is changed via the set method.
Traditionally this is where you may update DOM elements to match newly updated properties. There are plenty of things you may want to do in a watch method, but if you’ve written enough simple widgets that simply update some text or other DOM element that doesn’t need to much, it can get a little tedious typing up all these watch methods. Luckily, there’s a handy module you can add to your app called dbind.
The ties that dbind
dbind is kind of neat because it simply binds a DOM element to the values of an object. I would highly suggest reading the docs on dbind, as it even includes some validation and has a couple of neat tricks you can do with it. But of course, as with most things, nothing speaks louder than a functional example.
Let’s say you simply wanted to display the name of a State as you hovered your mouse over it. Sounds simple enough right? Well dbind can make this even simpler.
In this sample, you simply bind the DOM element to the STATE_NAME property and when you mouse-over the FeatureLayer use the set method to set this value. It all comes together in a nice little package.
Piece it all together
This may not seem like a big step in your widget development, but it’s one of those things that comes in really handy as you start building out your apps in small pieces and want to get creative in how and when things may get updated. I have a couple of widgets where a widget module may be a single list item, so dbind is great in this case. I’ll be honest here, it doesn’t look like too many updates have been made to the project over the past couple of years, but it does what it needs to do pretty well as far as I can tell, so it may just not need too many updates. It simply works as advertises.
So take dbind for a spin in your app development and simplify your workflow.