Обработка событий на поверхности додзё

Question

У меня есть поверхность, на которой я рисую какое-то динамическое изображение, основанное на данных из моего бэкэнда, при нажатии на определенную область, я хочу, чтобы разные данные были опубликованы. но мой следующий код всегда берет последние данные, нарисованные для публикации.

function renderICD() {
    var totalx=1200;
    var totaly=1000;
    var xOffset = 150;
    var yOffset = 20;

    surface = dojox.gfx.createSurface("icdTab",totalx+2,totaly+2);
    var grid = surface.createGroup();
    var step = 1;
    var xyHolder = {};
    var group = grid.createGroup();

    for(var ii=0;ii<2;ii++)
    {
         var x = (step-1) * (75+85);
         step++;

         var group = grid.createGroup();

         group.createRect({x:xOffset+x+33, y:yOffset+20+90, width: 10, height: 10}).setFill([255, 255, 255, 0.9])
            .setStroke({color:'black' , width:2});


              dojo.connect(group.getEventSource(),"onclick",function(e) {
                       var internal = ii;
                       alert("publishing "+internal);
               //shape was clicked, now do something!
                        });

         grid.createText({x:xOffset+x+33, y:yOffset+20+80, text:ii,align:"middle"})
            .setFill('red')
            .setFont({size: '10px',weight: "bold"});
    }
} 

Как я понимаю, присутствует только 1 экземпляр функции, написанной для обработки события, но я пытаюсь обработать 2 разных события. Как я могу достичь этого?

Снимок поверхности с 2-мя участками, когда я нажимаю на оба участка, я получаю "2" в своем оповещении.

Answer 1

JavaScript имеет функциональную область, а не область блока, поэтому у вас есть только одна ii переменная, которая всегда равна "2" к тому времени, когда вы нажимаете на прямоугольник. Есть много способов исправить это, пример ниже:

function renderICD() {
    var totalx=1200;
    var totaly=1000;
    var xOffset = 150;
    var yOffset = 20;

    surface = dojox.gfx.createSurface("icdTab",totalx+2,totaly+2);
    var grid = surface.createGroup();
    var step = 1;
    var xyHolder = {};
    var group = grid.createGroup();

    dojo.forEach([0,1], function(item, ii) {
         var x = (step-1) * (75+85);
         step++;

         var group = grid.createGroup();

         group.createRect({x:xOffset+x+33, y:yOffset+20+90, width: 10, height: 10}).setFill([255, 255, 255, 0.9])
            .setStroke({color:'black' , width:2});


              dojo.connect(group.getEventSource(),"onclick",function(e) {
                       var internal = ii;
                       alert("publishing "+internal);
               //shape was clicked, now do something!
                        });

         grid.createText({x:xOffset+x+33, y:yOffset+20+80, text:ii,align:"middle"})
            .setFill('red')
            .setFont({size: '10px',weight: "bold"});
    });
}