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

      }); 

     }); 

    }); 


}); 

});