Wednesday, October 16, 2013

today's epiphany

Assuming this HTML...

<div id="ying" class="tao">ying</div>
<div id="yang" class="tao">yang</div>

 
 

This blob of dojo will run without blowing up and even so if you take out the HTML all together, leave in the destroy call which does not sabotage the prequeried collection, or both. If there are elements with the "tao" class they are altered and if they are not there, so be it. There are no errors either way.

define([
   "dojo/dom-construct",
   "dojo/query",
], function (
   domConstruct,
   query
) {
   return {
      init: function() {
         app = this.app;
      },
      beforeActivate: function(current, data) {
         var collection = query(".tao");
         domConstruct.destroy("yang");
         collection.forEach(function(node, index, arr){
            node.innerHTML = "meh";
         });
      }
   };
});

So what? Why care? What if you want to dress up one or zero DOM elements? When would you have this need? Well, what if you want to query a database and upon a callback put data into a DOM element based on the query results and a unique string you hand into the callback (a GUID for example) for identifying the DOM element. Well, alright that sounds great, but what if, before the callback resolves, the DOM element disappears (is dropped) as a part of a transition from one pane to another in a one page JavaScript application where DOM elements are commonly discarded? If you call the element by id and it is not there you will have a problem. Not so in calling a class which may or may not exist at just one element. Here is some jQuery that does something similar:

 
 

$( ".tao" ).html("meh");

No comments:

Post a Comment