Javascript KineticJS group.get（'id'）[0]在我的代码中不一致

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

我使用这个.backgroundGroup.get'id'[0]在我的子度量原型函数中没有问题，但是当我尝试在drawMeasures原型函数中使用它时，它会阻止我的画布绘制任何东西。Chrome中的控制台显示无法读取未定义的属性ID

使用get方法时，这两种方法之间的唯一区别在于，在click事件中调用subMeasure函数，而在实例化视图时调用drawMeasures函数

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在initBackgrounds中被实例化为KineticJS组，其中添加了8个矩形，每个矩形的id为0到7

有问题的get调用发生在退税区。无问题的get调用发生在子度量中

JSIDLE链接：

编辑：

---

我编写了一个变通方法——我创建了一个背景数组，其中也包含矩形，并在draw backgrounds方法中访问该数组。不过我不喜欢，我宁愿将矩形保留在组中。

在元素添加到阶段之前，您尝试调用动态查找方法

如果您使用Chrome开发者工具并使用{}按钮，它将非常漂亮地打印缩小的代码，允许您查看调用堆栈以找到出错代码的来源。在本例中，在尝试执行get时未定义阶段

JSLint是一个很好的工具。在JSFIDLE中运行时，它发现了代码的其他问题

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

---

最后一件事-不要尝试执行尚未编码的代码，因为它将停止该块代码的执行。只需注释掉未完成的方法调用。

因为这需要调试，所以可能需要一个JSFIDLE。您的模型或控制器类没有代码。另外，在左边的框架部分添加动力学框架。完成了，我还没有为模型编写任何代码。谢谢你看，杰拉德。你编写了一个解决方案-意思是说，你不再需要任何人的帮助了？好吧，我仍然需要帮助-有一个KineticJS组和一个数组来容纳相同的矩形是混乱的，它仍然困扰着我，我不能只使用组。得到。谢谢杰拉德！这是我第一次编写大型应用程序，所以我想有很多工具我还没有听说过。