Dijit Checkbox tree event delegation

http://stackoverflow.com/questions/13878044/dijit-checkbox-tree-event-delegation/13878229

by phusick

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.4/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.4/dojox/form/resources/TriStateCheckBox.css">
<link rel="stylesheet" href="http://thejekels.com/js/cbtree/themes/claro/claro.css">
<div id="checkbox-tree"></div>
<script type="data/json" id="family">
{identifier: 'name',
  label: 'name',
  items: [
     { name:'John', type:'parent',
         children:[{_reference:'Chuck'}, {_reference:'Melissa'}, {_reference:'Nancy'}, {_reference:'Peter'}] },
     { name:'Mary', type:'parent', checked: true,
         children:[{_reference:'Chuck'}, {_reference:'Melissa'}, {_reference:'Nancy'}, {_reference:'Joan'}] },
     { name:'Chuck', type:'child', checked: true },
     { name:'Melissa', type:'child', checked: false },
     { name:'Nancy', type:'child', checked: true },
     { name:'Peter', type:'parent', checked: false,
         children:[{_reference:'Chantal'}, {_reference:'Pascal'}, {_reference:'Rutger'}, {_reference:'Charlotte'}] },
     { name:'Joan', type:'parent', checked: true,
         children:[{_reference:'Chantal'}, {_reference:'Pascal'}, {_reference:'Rutger'}, {_reference:'Charlotte'}] },
     { name:'Chantal', type:'child', checked: false,
         children:[{_reference:'Paul'}, {_reference:'Donna'}, {_reference:'Eric'}] },
     { name:'Rutger', type:'child', checked: false },
     { name:'Pascal', type:'child', checked: true },
     { name:'Charlotte', type:'child', checked: false },
     { name:'Paul', type:'child', checked: true },
     { name:'Donna', type:'child', checked: false },
     { name:'Eric', type:'child', checked: true }
]}
</script>

CSS

html, body, #checkbox-tree {
    width: 100%;
    height: 100%;
}

JavaScript

require({
    packages: [
        { name: "cbtree", location: "http://thejekels.com/js/cbtree/"}
    ]
},        
[
    "dojo/_base/declare",
    "dojo/_base/lang",
    "dojo/_base/array",
    "dojo/_base/Deferred",
    "dojo/dom",
    "dojo/aspect",
    "dojo/_base/connect",
    "dojo/data/ItemFileWriteStore",
    "cbtree/models/ForestStoreModel",
    "cbtree/models/StoreModel-API",
    "cbtree/Tree",
    "dojo/domReady!"
], function(
    declare,
    lang,
    array,
    Deferred,
    dom,
    aspect,
    connect,
    ItemFileWriteStore,
    ForestStoreModel,
    StoreModelAPI,
    Tree
) {
      
    eval("var data = " + dom.byId("family").textContent);
    var store = new ItemFileWriteStore({ data: data });
    
    var model = new ForestStoreModel({
        store: store,
        query: {type: 'parent'},
        rootLabel: 'The Family'
    });
    
    var MyTree = declare([Tree], {
        
        persist: true,
            
        _expandNode: function(node, recursive) {
            var dfd = this.inherited(arguments);
            Deferred.when(dfd, lang.hitch(this, function() {
                if (recursive === undefined) {
                    this.set("state", this._objectToArray(this._openedNodes));
                }
            }));
            return dfd;
        },
        
        _collapseNode: function(node) {
            this.inherited(arguments);
            this.set("state", this._objectToArray(this._openedNodes));
        },
        
        _objectToArray: function(object) {
            var arr = [];
            for (var each in object) {
                if (object.hasOwnProperty(each)) {    
                    arr.push(each);
                }
            }
            return arr;
        }
    });
    
    var tree = new MyTree({
        model: model,
        branchIcons: true,
        branchReadOnly: false,
        checkBoxes: true,
        nodeIcons: false
    });

    tree.placeAt(dom.byId("checkbox-tree"));
    
    // observe...