KineticJS group.get('#id')[0] 在我的代码中不一致

Question

我在我的程序中创建了一个类，它使用KineticJS作为我MVC设计的"视图"部分。类中的一个实例变量是一个包含多个矩形对象的组。当我尝试通过其ID在该组中选择特定矩形时，问题就出现了。

我使用this.backgroundGroup.get('#id')[0]在我的subMeasure原型函数中没有问题，但是当我试图在我的drawMeasures原型函数中使用它时，它会阻止我的画布绘制任何东西。Chrome的控制台显示"cannot read properties "id " of undefined".

这两个get方法使用的唯一区别是subMeasure函数在"click"事件时被调用，而drawMeasures函数在View实例化时被调用。

function View(){
    this.status = 0;
    this.stage;
    //layers
    this.backgroundLayer;
    this.lineLayer;
    this.noteLayer;
    this.scanLayer;
    this.editLayer;
    this.UILayer;
    //groups
    this.backgroundGroup;
    //edit buttons
    this.subMeas;
    this.addMeas;
    this.edit;
    this.backgroundArray;
    this.lineArray;
}
View.prototype.initialize = function(){
    //Initialize stage
    this.stage = new Kinetic.Stage({
    container: 'tab',
    width:1200,
    height: 400
    });
    //Initialize layers
    this.backgroundLayer = new Kinetic.Layer();
    this.lineLayer = new Kinetic.Layer();
    this.noteLayer = new Kinetic.Layer();
    this.scanLayer = new Kinetic.Layer();
    this.editLayer = new Kinetic.Layer();
    this.UILayer = new Kinetic.Layer();
    //Initialize edit layer
    this.edit = new Kinetic.Rect({
        x:0,
        y:5,
        width:40,
        height:20,
        fill: 'gray',
        stroke: 'black',
        strokeWidth: 2
    });
    this.subMeas = new Kinetic.Rect({
        x:40,
        y:5,
        width:40,
        height:20,
        fill: 'blue',
        stroke: 'black',
        strokeWidth: 2
    });
    this.addMeas = new Kinetic.Rect({
        x:80,
        y:5,
        width:40,
        height:20,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 2
    });
    this.addEditButtonListeners();
    this.editLayer.add(this.edit);
    this.editLayer.add(this.subMeas);
    this.editLayer.add(this.addMeas);
    //Initialize Background Layer
    this.initBackgrounds();
    this.drawBackgrounds();
    this.backgroundLayer.add(this.backgroundGroup);
    //Initialize Line Layer
    this.initLines();
    //Initialize Note Layer
    this.initNotes();
    //Add everything to the stage and display
    this.stage.add(this.backgroundLayer);
    this.stage.add(this.lineLayer);
    this.stage.add(this.noteLayer);
    this.stage.add(this.scanLayer);
    this.stage.add(this.editLayer);
    this.stage.add(this.UILayer);
}    
View.prototype.initBackgrounds = function() {
    this.backgroundGroup = new Kinetic.Group({
        x:20,
        y:80
    });
    for(var i=0; i<controller.MAX_MEASURES; i++){
        this.backgroundGroup.add(new Kinetic.Rect({
            x: i*80,
            y:0,
            width:80,
            height:220,
            fill: 'gray',
            stroke: 'black',
            strokeWidth: 1,
            id: i + '',
            name: i + ''
        }));    
    }
    this.drawBackgrounds();
    this.backgroundLayer.add(this.backgroundGroup);
}
View.prototype.drawBackgrounds = function() {
    var temp;
    for (var i=0; i<numMeasures; i++){
        temp = this.backgroundGroup.get('#'+i)[0];
        temp.setVisible(true);
    }
    for ( i; i<controller.MAX_MEASURES; i++){
        temp = this.backgroundGroup.get('#'+i)[0];
        temp.setVisible(false);
    }
}

View.prototype.addEditButtonListeners = function() {
    this.edit.on('click', function(){
        controller.toggleEdit();
    });
    this.subMeas.on('click', function(){
        controller.subMeasure();
    });
    this.addMeas.on('click', function(){
        controller.addMeasure();
    });
}

View.prototype.toggleEdit = function() {
    if(isEdit){
        this.subMeas.setVisible(false);
        this.addMeas.setVisible(false);
        this.stage.draw();
        isEdit = 0;
    }else {
        this.subMeas.setVisible(true);
        this.addMeas.setVisible(true);
        this.stage.draw();
        isEdit = 1;
    }
}

View.prototype.subMeasure = function() {
    var temp;
    numMeasures--;
    temp = this.backgroundGroup.get('#'+numMeasures)[0];
    temp.setVisible(false);
    this.stage.draw();
} 

backgroundGroup在initbackground中实例化为一个KineticJS组，在那里它得到8个矩形，每个矩形的id为0到7。

有问题的get调用发生在drawbackground中。没有问题的get调用发生在subMeasure中。

JSFiddle链接:

http://jsfiddle.net/7xfLq/7/

编辑:我编写了一个解决方案——我创建了一个backgroundArray来保存矩形，并在绘制背景方法中访问这个数组。但是我不喜欢它，我宁愿把矩形保留在组中

Answer 1

您试图在元素添加到舞台之前调用动能查找方法。

如果你使用Chrome开发者工具并使用"{}"按钮，它会很好地打印出缩小的代码，允许你查看调用堆栈以找到违规代码的来源。在本例中，当您尝试执行get()时，Stage没有定义。

JSLint是一个很好用的工具。它确定了在JSFiddle中运行时代码的其他问题。

这是不产生错误的代码的链接。

http://jsfiddle.net/7xfLq/11/

最后一件事-不要尝试执行未编码的代码，因为它会停止执行该块的代码。