StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PODojo require() and AMD (1.7)
text
Body
copied!<p>I'm having a heckuva time transitioning to Dojo and the new AMD structure, and I'm really hoping someone can shed some light on the whole concept. I've been living on Google for the last few weeks trying to find information on not the usage, but the structure and design pattern trends in using this. </p> <p>I find it strange that for a relatively complex javascript application, such as for a main page where Dijits need to be created and styled, DOM elements created, etc, that I need to require, and therefore use, a TON of different modules that were otherwise available in the dojo namespace before the AMD system (or, at least, not assigned to 23 different vars).</p> <p>Example:</p> <pre><code>require(['dijit/form/ValidationTextBox', 'dijit/form/SimpleTextarea', 'dijit/form/CheckBox', 'dijit/Dialog', 'dijit/form/Form']) require(['dojo/ready', 'dojo/parser', 'dojo/dom-style', 'dijit/registry', 'dojo/dom', 'dojo/_base/connect', 'dojo/dom-construct'], function(ready, parser, style, registry, dom, event, construct){ //...etc } </code></pre> <p>That's only a few of the modules for one of the pages I'm working on. Surely there's a better, non-breaking-in-future-releases way of accessing these methods, etc. I mean, do I really have to import an entirely new module to use <code>byId()</code>? And yet another to connect events? On top of that, all the clutter being created by having to assign a variable name in the functions argument list to cling to just seems like such a backstep.</p> <p>I thought maybe you would <code>require()</code> the module only when needed, such as the <code>query</code> module, but if I need it more than once, then chances are the variable it's assigned to is out of scope, and I'd need to put it in a <code>domReady!</code> or <code>ready</code> call. <em>reaalllly....??!</em></p> <p>Which is why I can only assume it's my lack of understanding for dojo.</p> <p>I really have looked and searched and bought books (albeit, a pre-AMD one), but this library is really giving me a run for my money. I appreciate light anyone can shed on this.</p> <p><strong>Edit for Example</strong></p> <pre><code>require(['dijit/form/ValidationTextBox']) require(['dojo/ready', 'dojo/parser', 'dojo/dom-style', 'dijit/registry', 'dojo/dom', 'dojo/_base/connect', 'dojo/dom-construct'], function(ready, parser, style, registry, dom, event, construct){ /* perform some tasks */ var _name = new dijit.form.ValidationTextBox({ propercase : true, tooltipPosition : ['above', 'after'] }, 'name') /* Let's say I want to use the query module in some places, i.e. here. */ require(['dojo/query', 'dojo/dom-attr'], function(query, attr){ query('#list li').forEach(function(li){ // do something with these }) }) } </code></pre> <p>Based off of this format, which is used with many examples both from the dojo toolkit folks as well as third party sites, it would be, IMHO, absolutely ridiculous to load all the required modules as the first <code>function(ready, parser, style, registy...</code> would get longer and longer, and create problems with naming collisions, etc. </p> <p>Firing up and <code>require()</code>ing all the modules I would need during the life of the script just seems silly to me. That being said, I'd have to look at some of the "package manager" scripts. But for this example, if I wanted to use the query module in select places, I would either have to load it up with the rest in the main <code>require()</code> statement. I understand why to an extent, but what's so bad with generic dot-syntax namespaces? dojo.whatever? dijit.findIt()? Why load module, reference in a unique name, pass through closure, blah blah?</p> <p>I wish this were an easier question to ask, but I hope that makes sense. </p> <p><strong>Exasperation</strong></p> <p>Call me a newb, but this is really.. really.. driving me mad. I'm no noob when it comes to Javascript (apparently not) but wow. I cannot figure this <em></em> out!</p> <p>Here's what I'm gathering. In adder.js:</p> <pre><code>define('adder', function(require, exports){ exports.addTen = function(x){ return x + 10 } }) </code></pre> <p>In some master page or whatever:</p> <pre><code>require(['./js/cg/adder.js']) </code></pre> <p>...which doesn't follow the neat <code>require(['cg/adder'])</code> format but whatever. Not important right now.</p> <p>Then, the use of <code>adder</code> should be:</p> <pre><code>console.log(adder.addTen(100)) // 110 </code></pre> <p>The closest I got was <code>console.log(adder)</code> returning <code>3</code>. Yep. <code>3</code>. Otherwise, it's <code>adder is not defined</code>.</p> <p>Why does this have to be so difficult? I'm using my noob card on this, cause I really have no idea why this isn't coming together.</p> <p>Thanks guys.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload