3

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メソッドハンドラーが実行された後に、上記のオーバーライドされたメソッドが呼び出されるようにしたい.今では常に最初に呼び出される.任意のアイデア.(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();

                    });
4

1 に答える 1

5

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

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/

于 2012-12-14T11:57:11.473 に答える