javascript - Dijit Checkbox tree event delegation

dojo dijit.tree

Question

Estoy tratando de implementar un árbol de casilla de verificación dijit similar a http://thejekels.com/dojo/cbtree_AMD.html

Y anulando un método como este:

 connect.connect( tree, "_onExpandoClick", model, this,function(/*data.item*/ item) {
console.log("My onExpandoClick");
});

El archivo Javascript de Dijit Tree ya contiene el método de manejo para este evento. Mi problema es que

Quiero que se llame al método reemplazado anterior después de que se haya ejecutado el manejador de métodos tree js. Como por ahora siempre se llama primero. Cualquier idea. (Dijit 1.7)

En mi configuración, el siguiente código no funciona:

 require(["dijit/TitlePane"]);
require([
"dojo/_base/lang",
"dojo/dom",
"dojo/aspect",
"dijit/CheckboxTree",
"dojox/data/JsonRestStore",
"my_ext/CheckboxForestStoreModel",
"dojo/domReady!"
], function(dom, Tree, JsonRestStore, CheckboxForestStoreModel) {
var treeStore = new JsonRestStore({ target: "ObjectTreeServlet/",labelAttribute:"name",allowNoTrailingSlash:true});
var treeModel = new CheckboxForestStoreModel({
store: treeStore,
deferItemLoadingUntilExpand: true,
rootId: "ROOT",
rootLabel: "NETWORK",
childrenAttrs: ["children"],
query:"?id=0"
});
var treeStateSession= ''<%=session.getAttribute("treeState")%>'';
//alert(treeStateSession);
var tree = new Tree({
id : "tree",
model : treeModel,
showRoot : false,
persist: true,
setCheckboxOnClick : false,
_sessionVal:treeStateSession
},
''treeDiv'');
function getParameterByName(url,name) {
var match = RegExp(''[?&]'' + name + ''=([^&]*)'')
.exec(url);
return match && decodeURIComponent(match[1].replace(//+/g, '' ''));
}
dojo.require("dojo.aspect");
/*
aspect.after(tree, "_onExpandoClick", function(item) {
console.log(tree.getSessionValue());
document.getElementById("treeState").value=tree.getSessionValue();
console.log(document.getElementById("treeState").value.length);
}); */
aspect.after(tree, "_onExpandoClick", function() {
console.log("My onExpandoClick"); 

});

Código dentro de CheckBoxTree.js:

_state: function(node, expanded){
// summary:
// Query or set expanded state for an node
if(!this.persist){
return false;
}
var path = array.map(node.getTreePath(), function(item){
return this.model.getIdentity(item);
}, this).join("/");
if(arguments.length === 1){
return this._openedNodes[path];
}else{
if(expanded){
this._openedNodes[path] = true;
}else{
delete this._openedNodes[path];
}
var ary = [];
for(var id in this._openedNodes){
ary.push(id);
}
//console.log(ary.length);
//cookie(this.cookieName, ary.join(","), {expires:365});
var sessionVal=ary.join(",");
console.log("TreeSTATE CheckBOX");
**//FROM HERE SEND sessionVal TO MAIN HTML PAGE WHERE TREE IS CREATED?**
//this.getSessionValue(ary.join(","));
}
},

Lo que probé, que no está dando los resultados deseados .:

aspect.after(tree, "_state", function() {
console.log("TreeSTATE " + tree.getSessionValue());
document.getElementById("treeState").value=tree.getSessionValue();
});

Answer 1

Use dojo/aspect lugar:

// var aspect = require("dojo/aspect");
// var lang = require("dojo/_base/lang");
aspect.after(tree, "_onExpandoClick", lang.hitch(this, function(item) {
console.log("My onExpandoClick");
}))

Editar: También tenga en cuenta que dijit/Tree y también cbtree/Tree emiten los eventos onOpen y onClose , por lo que puede registrar oyentes de eventos para expandir y contraer acciones de nodo:

tree.on("open", function(item, node) {
console.log("onOpen:", item, node);
});
tree.on("close", function(item, node) {
console.log("onClose:", item, node);
});

Editar # 2 : De acuerdo con la discusión a continuación, cambié mi enfoque de usar dojo/aspect a subclasing Tree (debido a algún extravagante async funky). Entonces primer Tree subclase:

// var declare = require("dojo/_base/declare");
// var lang = require("dojo/_base/lang");
// var Deferred = require("dojo/_base/Deferred");
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;
}
});

Luego puede observar cambios de estado expandir / colapsar en la instancia de MyTree :

tree.watch("state", function(/*String*/key, /*Array*/oldValue, /*Array*/newValue) {
console.log(newValue);
});

Véalo en acción: http://jsfiddle.net/phusick/LcPzv/