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

Question

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

Tarod Tarod · Accepted Answer · 2016-03-18T11:31:57

You could connect both signals in the Component.onCompleted handler.

Using your code it would be something like this:

ListView {
        id: myListView
        width: 100
        height: 600

        model: myModel
        delegate: TheDelegate {
            name: model.name
            Component.onCompleted: {
                trigger.connect(root.componentTriggered)
            }
        }
    }

Instead of calling the signal componentTriggered you could also implement a function, but it depends on your requirements. The signal is OK in any case.

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

1 Answers