Dijit 复选框树事件委托

Question

我正在尝试实现类似于http://thejekels.com/dojo/cbtree_AMD.html 的 dijit 复选框树

并覆盖这样的方法：

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

Dijit Tree javascript 文件已包含此事件的处理程序方法。我的问题是

我希望在树 js 方法处理程序之后调用上述覆盖的方法 已被执行。按照现在，它总是首先被调用。任何想法。（dijit 1.7）

在我的设置中，以下代码不起作用：

    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");        

});

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(","));
        }
    },

我试过了，但没有得到想要的结果。：

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

                    });

Answer 1

改用dojo/aspect：

// var aspect = require("dojo/aspect");
// var lang   = require("dojo/_base/lang");

aspect.after(tree, "_onExpandoClick", lang.hitch(this, function(item) {
    console.log("My onExpandoClick");
}))

编辑：另外请注意，dijit/Tree 和 cbtree/Tree 会发出 onOpen 和 onClose 事件，因此您可以注册事件侦听器以展开和折叠节点操作：

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

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

编辑#2：根据下面的讨论，我将我的方法从使用dojo/aspect 更改为子类化Tree（因为那里有一些古怪的异步时髦）。所以第一个子类Tree：

// 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;
    }
});

然后您可以观察MyTree 实例的展开/折叠状态变化：

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

查看实际操作：http://jsfiddle.net/phusick/LcPzv/