Dijit 复选框树事件委托

Posted 2023-02-26

【中文标题】Dijit 复选框树事件委托

【英文标题】：Dijit Checkbox tree event delegation

【发布时间】：2012-12-14 11:43:14

【问题描述】：

我正在尝试实现类似于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();

                    );

【参考方案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/

【讨论】：

我不确定你的意思，所以我整理了一个例子，请看一下，让我知道你不喜欢那里：http://jsfiddle.net/phusick/LcPzv/。另请注意，Tree 会发出 open 事件，因此您可以为其添加侦听器：tree.on("open", function(item, node))。

您好，已粘贴代码。它说 JsonTreeStore 不是构造函数。如果我们删除您建议的两个要求，则树来了。有什么帮助吗？

JsonRestStore 不是构造函数，因为在JsonRestStore 变量是dojo/aspect 模块。 require([/*Array*/], function() /*Factory*/) - 要求 array 中的项目必须匹配 factory 函数中的参数。 AMD loader 也是异步的，因此 require(["dijit/TitlePane"]) 在您的工厂函数中不可用。不要混合使用旧版 dojo.require() 和 AMD require()/define()。选择一个并坚持下去。

感谢您上次添加的代码，我终于完全理解您将要实现的目标。我编辑了代码以满足您的要求：jsfiddle.net/phusick/LcPzv。我不得不继承 Tree 类，因为一些古怪的异步时髦，但现在你需要观察展开/折叠状态变化的是 tree.watch("state", function(key, oldValue, newValue) /* your handler here */ );。希望，这会有所帮助。

但它在 jsFiddle 中，还是没有？我在 Chrome、Firefox 和 IE9 中对其进行了测试。可能是由于Dojo的版本？必需的dojo/Stateful 是在 Dojo 1.5 中引入的，但在 jsFiddle 的 1.7 之外，它可能无法正确处理数组更改。无论如何，您可以拨打任何您想要的电话，而不是this,set("state", ...)。这个dojo/Stateful 是很好且可读的模式...