动态 dojo/on 事件

Question

我有一个场景，我想使用 dojo 概括按钮单击时的页面滚动事件。很长一段时间以来，我一直无法取得突破。我是 DOJO 初学者，希望得到一些指示以获得好的解决方案。我有一个小提琴：

http://jsfiddle.net/sacnayak/Ej39D/3/

再次粘贴代码以供第一次参考：

require(["dojo/fx", "dojox/fx/scroll", "dojo/dom", "dojo/dom-style", "dojo/on", "dojo/domReady!", "dojo/window", "dojo/dom-geometry", "dojo/_base/fx", "dojo/Deferred", "dojo/query"],

function (coreFx, easing, dom, style, on, ready, win, domGeometry, fx, Deferred, query) {
function asyncProcess() {
    var deferred = new Deferred();


    setTimeout(function () {
        deferred.resolve("success");
    }, 500);

    return deferred.promise;
}



    var currentActiveDomButton = query("#screens .screen.active .card-footer-button")[0];
    console.log(currentActiveDomButton);

    on(dom.byId(currentActiveDomButton.id), "click", function () {

        var currentActiveDomNode = query("#screens .screen.active")[0];
        console.log(currentActiveDomNode);

        var screens = query("#screens .screen");
        var nextActiveDiv;
        for (i = 0; i < screens.length; i++) {
            if (dojo.attr(currentActiveDomNode, "id") != dojo.attr(screens[i], "id")) {
                nextActiveDiv = screens[i];
                console.log(nextActiveDiv);
                break;
            }
        }

        fx.animateProperty({
            node: currentActiveDomNode.id,
            duration: 500,
            properties: {
                opacity: {
                    start: '1',
                    end: '0.5'
                }
            }
        }).play();

        var process = asyncProcess();
        process.then(function () {
            style.set(nextActiveDiv.id, "display", "block");
            //dojo.byId(currentActiveDomButton.id).style.display = 'none';
            dojox.fx.smoothScroll({
                node: nextActiveDiv.id,
                win: window
            }).play();

            require(["dojo/dom-class"], function (domClass) {
                domClass.remove(currentActiveDomNode.id, "active");
                domClass.add(currentActiveDomNode.id, "visited");
                domClass.add(nextActiveDiv.id, "active");
                currentActiveDomButton = query("#screens .screen.active .card-footer-button")[0];
                console.log(currentActiveDomButton.id);

            });

        });





    });


});

Answer 1

能够解决这个问题。使用了 dojo.forEach 并为每个按钮设置了一个事件监听器。

这是小提琴： http://jsfiddle.net/sacnayak/Ej39D/8/

require(["dojo/fx", "dojox/fx/scroll", "dojo/dom", "dojo/dom-style", "dojo/on", "dojo/domReady!", "dojo/window", "dojo/dom-geometry", "dojo/_base/fx", "dojo/Deferred", "dojo/query", "dojo/dom-class", "dojo/NodeList-traverse"],

function (coreFx, easing, dom, style, on, ready, win, domGeometry, fx, Deferred, query, domClass) {
function asyncProcess() {
    var deferred = new Deferred();


    setTimeout(function () {
        deferred.resolve("success");
    }, 500);

    return deferred.promise;
}

query(".card-footer-button").forEach(function (buttonNode) {
    on(dom.byId(buttonNode.id), "click", function () {


        //fetch the current active screen
        var currentActiveDomNode = query("#screens .screen.active")[0];


        var screens = query("#screens .screen");
        var nextActiveDiv;
        if (buttonNode.value == "Next") {
            for (i = 0; i < screens.length; i++) {

                if (dojo.attr(currentActiveDomNode, "id") != dojo.attr(screens[i], "id")) {
                    if (!domClass.contains(screens[i].id, "visited")) {
                        nextActiveDiv = screens[i];

                        break;
                    }
                }
            }


        } else if (buttonNode.value == "Edit") {

            nextActiveDiv = query("#" + buttonNode.id).parent(".screen")[0];

            /*fx.animateProperty({
                node: nextActiveDiv.id,
                duration: 500,
                properties: {
                    opacity: {
                        start: '0.5',
                        end: '1'
                    }
                }
            }).play();*/
        }

        fx.animateProperty({
            node: currentActiveDomNode.id,
            duration: 500,
            properties: {
                opacity: {
                    start: '1',
                    end: '0.5'
                }
            }
        }).play();


        var process = asyncProcess();
        process.then(function () {
            style.set(nextActiveDiv.id, "display", "block");
            dojo.byId(buttonNode.id).style.display = 'none';

            if(dojo.byId(buttonNode.id + 'Edit') !== null){
                dojo.byId(buttonNode.id + 'Edit').style.display = 'block';
            }


            if (buttonNode.value == "Edit") {
                    //query(".card-footer-button").forEach(function (buttonArray) {
                        //if(buttonArray.value == "Next"){
                           // buttonArray.style.display = "none";
                        //}
                    //});

                if (buttonNode.id.indexOf("Edit") != -1) {
                    //console.log('Here');                        
                    //console.log('index' + buttonNode.id.indexOf("Edit"));
                    //console.log('length' + buttonNode.id.length);
                    var start = 0;
                    var end = buttonNode.id.indexOf("Edit");                        
                    var associatedNextButtonNode = buttonNode.id.substring(start, end);
                    //console.log(associatedNextButtonNode);
                    dojo.byId(associatedNextButtonNode).style.display = 'block';
                }
            }



            dojox.fx.smoothScroll({
                node: nextActiveDiv.id,
                win: window
            }).play();

            if(nextActiveDiv.style.opacity == '0.5'){
                fx.animateProperty({
                node: nextActiveDiv.id,
                duration: 500,
                properties: {
                    opacity: {
                        start: '0.5',
                        end: '1'
                    }
                }
            }).play();
            }

            require(["dojo/dom-class"], function (domClass) {
                domClass.remove(currentActiveDomNode.id, "active");
                domClass.remove(nextActiveDiv.id, "visited");
                if (buttonNode.value == "Next") {
                    domClass.add(currentActiveDomNode.id, "visited");
                }
                domClass.add(nextActiveDiv.id, "active");

            });

        });

    });


});

});