How to bind to a signal from a delegate component within a ListView in QML

Viewed 7095

Let's say I have a ListView of clickable delegate components (or GridView or Repeater). These delegate components need to emit a signal along with custom data when triggered that can be picked up by the parent of the ListView. How can this signal binding be achieved?

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

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 }
    }
}

which accesses TheDelegate.qml

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)
        }
    }
}
1 Answers
Related