How to bind to a signal from a delegate component within a ListView in QML
<p>Let's say I have a <code>ListView</code> of clickable delegate components (or <code>GridView</code> or <code>Repeater</code>). These delegate components need to emit a signal along with custom data when triggered that can be picked up by the parent of the <code>ListView</code>. How can this signal binding be achieved?</p>

<p>e.g. The following code is my attempt but I don't know how to bind the <code>trigger</code> signal of the delegate component to the <code>componentTriggered</code> signal in the <code>root</code> item?</p>

<pre><code>Item {
    id: root
    anchors.fill: parent

    signal componentTriggered(string name)

    onComponentTriggered: {
        console.log(name + ' component was triggered')
    }

    ListModel {
        id: myModel

        ListElement { name: "alpha" }
        ListElement { name: "beta" }
        ListElement { name: "gamma" }
        ListElement { name: "delta" }
    }

    ListView {
        id: myListView
        width: 100
        height: 600

        model: myModel
        delegate: TheDelegate { name: model.name }
    }
}
</code></pre>

<p>which accesses <code>TheDelegate.qml</code></p>

<pre><code>import QtQuick 2.0

Rectangle {
    id: root
    width: 100
    height: 50
    color: "steelblue"
    border.color: "white"
    border.width: 2

    property string name

    signal trigger(string name)

    Text {
        anchors.centerIn: parent
        text: model.name
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            console.log(root.name + ' clicked')
            root.trigger(root.name)
        }
    }
}
</code></pre>