Appcelerator - Javascript - losing the reference

Question

I have the following code on my app to add widgets:

while(i < rc_length) {
    console.log(i);
    mooncards[i] = Alloy.createWidget("moonCards");
    mooncards[i].on('close',function(){
        $.dashboard_scroll.remove(mooncards[i].getView());
    });
    $.dashboard_scroll.add(mooncards[i].getView());
    i++;
}

So I can add mooncards on my scrollview and add a function to be triggered inside the widget to remove itself.

That was the idea, but unfortunately the only widget removed is the last one. Clearly the reference remove(mooncards[i]) is lost while adding new widgets.

I'm still learning about Javascript, so I don't what I'm doing wrong here.

How can I add a lot of widgets and remove each one specifically, without losing the reference?

Please, let me know If I need to be more clear.

Answer 1

You have a classic javascript binding issue.

I would try changing:

 $.dashboard_scroll.remove(mooncards[i].getView());

to

 $.dashboard_scroll.remove(this.getView());