a.schaefer-esri-de-esridist

What's new in Dojo 1.8?

Discussion created by a.schaefer-esri-de-esridist on Jan 13, 2013
Latest reply on Jan 14, 2013 by odoe
Hi all.

Since the JS-API 3.3 uses Dojo 1.8.0 I think it's a good time to talk about all the new stuff coming with the new Dojo version. Most of the examples seem to use the known way and functionality but as the JS-API documentation states, new applications should use AMD and and the new style of syntax. Of course a thread like this cannot keep you away from the official dojo documentation (http://dojotoolkit.org/documentation/) but it may be worth to look at some topics. Discussions and links welcome.

dojoConfig variable:

It's a small typo thing (formerly djConfig) and contains more parameters, for example for debugging. http://dojotoolkit.org/documentation/tutorials/1.8/dojo_config/


Notation of dijits in the markup:

The syntax changes from the point-notation to the slash-notation. The attribute is now called data-dojo-type and data-dojo-props.

OLD:
: <div id="headerDiv" dojotype="dijit.layout.ContentPane" region="top">header</div>

NEW:
: <div id="headerDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">header</div>



Loading of modules in the script code:

No more dojo.require() and no more dojo.addOnLoad(init). We are in AMD mode now.

: require(["dojo/_base/array", "dojo/parser", "dojo/ready", "dojo/dom",
:          "dojo/on", "dijit/layout/ContentPane", "dijit/layout/BorderContainer",
:          "esri/map", "esri/arcgis/utils", "esri/dijit/Attribution",
:          "esri/dijit/Legend"],
:     function(array, parser, ready, dom, on) {
:         ready(function() {
:             // "init" functionality
:         });
:         // other methods, variables, etc.
:     }
:  ); 


For me it's still a bit tricky to get the connection from the modules to the parameters of the main function. I can use "array", "parser", "dom" later in my code. But I haven't done it with map. The why and how is a bit mysterious. We also get into some lifecycle discussions, for example with domReady stuff. Discussions welcome. :)

Also keep an eye or no eye on the dijit/Attribution - I get it from the debug statements. *g*

These lines are some of the critical parts because the syntax changes and it's a new way of how this works together.


Getting dom elements

dom.byId. Coming from dojo/dom but only if it's a parameter of the function. Right?

: var rightDivElement = dom.byId("rightDiv");


Events:

No more dojo.connect but for example:

: var rightDivHandle = on(dom.byId("rightDiv"), "dblclick", show);


On is coming from dojo/on. Diconnect with rightDivHandle.remove();


array.map:

No more dojo.map() but array.map() from dojo/_base/array.

Well, these are only some small hints but we can collect some parts together, if you like. Here are the 4 basic links:

http://dojotoolkit.org/blog/dojo-1-8-released
http://dojotoolkit.org/documentation/
API: http://dojotoolkit.org/api/1.8
Reference Guide: http://dojotoolkit.org/reference-guide/1.8/

Outcomes