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的樹JavaScript文件中已經包含了此事件的處理方法。我的問題是

我想樹js的方法處理後調用上面覆蓋方法 一直按現在它總是叫first.Any想法executed.As。（來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

使用​​代替：

// 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/