Dynamic component creation triggered by an event

gistfile1.js

    fluid.defaults("colin.leapGrains", {
        gradeNames: ["fluid.viewComponent", "autoInit"],
        
        members: {
            activeTips: {},
            synths: []
        },
                
        components: {
            leap: {
                type: "flock.leapMotion",
                options: {
                    listeners: {
                        onPointablesChanged: {
                            funcName: "colin.leapGrains.renderTips",
                            args: [
                                "{arguments}.0.pointables", 
                                "{leapGrains}.dom.fingerRegion", 
                                "{leapGrains}.activeTips", 
                                "{leapGrains}.options"
                            ]
                        }
                    }
                }
            }
        },
        
        dynamicComponent: {
            synths: {
                createOnEvent: "onNewPointable",
                type: "flock.synth",
                options: {
                    source: "{arguments}.0",
                    synthDef: {
                        ugen: "flock.ugen.sinOsc",
                        freq: {
                            id: "freqPos",
                            ugen: "flock.ugen.leap.position",
                            pointable: 1,
                            mul: 540,
                            add: 60,
                            options: {
                                axis: "x"
                            }
                        },
                        mul: {
                            id: "volumePos",
                            ugen: "flock.ugen.leap.position",
                            pointable: 1,
                            options: {
                                axis: "z"
                            }
                        }
                    }
                }
            }
        },
        
        listeners: {
            onCreate: [
                {
                    funcName: "flock.init",
                    args: [{
                        bufferSize: "{that}.options.bufferSize"
                    }]
                },
                {
                    funcName: "flock.enviro.shared.play"
                }
            ]
        },
        
        events: {
            onNewPointable: "{leap}.events.onNewPointable"
        },
        
        selectors: {
            fingerRegion: ".fingers",
            audioRegion: ".audio"
        },
        
        classes: {
            finger: "finger"
        },
        
        markup: {
            finger: "<div />"
        },
        
        maxTipSize: 75,
        bufferSize: 4096
    });