JavaFX binding in sequences

I had a Group of circles, i.e.

var circles:Circle[];
var group:Group = Group { content: [circles] };

strangely, I couldn’t get newly inserted circles to render.

It turns out that you have to bind group.content to ensure that changes in circles are reflected in group.content.

Here’s a test routine.

import javafx.scene.*;
import javafx.scene.paint.*;
import javafx.scene.shape.*;
import javafx.stage.*;

var lines = for (i in [1..10])
    Line {startX:i*30 startY:20 endX:i*20 endY:500};

var circles = for (i in [1..10])
    Circle {centerX:i*30 centerY:50 radius:20};

Stage
{
    scene: Scene
    {
        content: Group
        {
            content: // bind
            [

                Rectangle {fill:Color.YELLOW width:800 height:500}
                circles,
                lines,

            ]

            onMouseClicked: function(e)
            {
                println('clicked');
                insert Circle {fill:Color.RED centerX:e.x centerY:e.y radius:20} into circles;
            }

        }

    }
}

Uncomment the //bind and observe the difference.