Component load modelData failed

[Silvia-V]

Component load modelData failed

code here

import QtQuick 2.5
import QtQuick.Controls 1.2

Rectangle {
    id: mTabView
    anchors.fill: parent
    color: "#393e46"

    property var model: [111, 222, 333, 444]
    property Component delegate: Timer {
        repeat: true
        running: true
        interval: 1000
        onTriggered: {
            // work
            console.log(2, parent, dddddddd)
            // not work
            console.log(2, parent, modelData)
        }
    }

    Item {
        id: viewArea
        anchors.fill: parent

        Repeater {
            model: mTabView.model
            delegate: Loader {
                property var dddddddd: modelData
                width: viewArea.width
                height: viewArea.height
                Timer {
                    repeat: true
                    running: true
                    interval: 1000
                    onTriggered: {
                        // work
                        console.log(1, parent, dddddddd)
                        // not work
                        console.log(1, parent, modelData)
                    }
                }
                sourceComponent: mTabView.delegate
            }
        }
    }
}

Use dddddddd instead of modelData, It work, but modelData console log undefined

[jeremy_k]

The modelData property is only attached to the top level of the delegate. Children can access it through top level. Eg

Repeater {
    delegate: Loader {
        id: loader
        Timer {
            onTriggered: console.log(loader.modelData)
        }
    }
}

[Silvia-V]

@jeremy_k Thank you for your reply,After add "id: loader":

Rectangle {
    id: mTabView
    anchors.fill: parent
    color: "#393e46"

    property var model: [111, 222, 333, 444]
    property Component delegate: Timer {
        repeat: true
        running: true
        interval: 1000
        onTriggered: {
            // work
            console.log(2, parent, dddddddd)
            // not work
            console.log(2, parent, parent.modelData)
            // not work
            console.log(2, parent, loader.modelData)
        }
    }

    Item {
        id: viewArea
        anchors.fill: parent

        Repeater {
            model: mTabView.model
            delegate: Loader {
                property var dddddddd: modelData
                id: loader
                width: viewArea.width
                height: viewArea.height
                Timer {
                    repeat: true
                    running: true
                    interval: 1000
                    onTriggered: {
                        // work
                        console.log(1, parent, dddddddd)
                        // not work
                        console.log(1, parent, modelData)
                    }
                }
                sourceComponent: mTabView.delegate
            }
        }
    }
}

I try the code again and get this:

qml: 1 QQuickLoader_QML_2(0x56511cb28e70) 333
qml: 1 QQuickLoader_QML_2(0x56511cb28e70) 333
qml: 2 QQuickLoader_QML_2(0x56511cb28e70) 333
qml: 2 QQuickLoader_QML_2(0x56511cb28e70) undefined      // console.log(2, parent, parent.modelData)
qrc:/Test1.qml:20: ReferenceError: loader is not defined              // console.log(2, parent, loader.modelData)

still not work

[jeremy_k]

The last console.log doesn't work because the id "loader" only has meaning within the lexical scope of the Repeater delegate. It isn't available outside of that Loader, including the non-inline sourceComponent.

The second to last one may also be scope related.

[Silvia-V]

@jeremy_k Well, The mechanism make me confused
Fond a way to fix it

Rectangle {
    id: mTabView
    anchors.fill: parent
    color: "#393e46"

    property var model: [111, 222, 333, 444]
    property Component delegate: Timer {
        repeat: true
        running: true
        interval: 1000
        onTriggered: {
            console.log(2, parent, modelData)
        }
    }

    Item {
        id: viewArea
        anchors.fill: parent

        Repeater {
            id: repeater
            model: mTabView.model
            delegate: Loader {
                property var modelData: repeater.model[index]
                id: loader
                width: viewArea.width
                height: viewArea.height
                sourceComponent: mTabView.delegate
                Timer {
                    repeat: true
                    running: true
                    interval: 1000
                    onTriggered: {
                        console.log(1, parent, modelData)
                    }
                }
            }
        }
    }
}

If there is no better solution, it can only become solved.
Thank you @jeremy_k
Forgive my broken English[cry]

[jeremy_k]

@Silvia-V said in Component load modelData failed:

@jeremy_k Well, The mechanism make me confused
Fond a way to fix it
...
If there is no better solution, it can only become solved.

If that works and is something you find understandable, that looks like a reasonable structure.

Presuming that this is representative of the real structure rather than a compact example, you might consider changing property Component delegate to be an alias for the Repeater delegate, and then define the default delegate inline.

For non-inline delegates, I favor passing modelData as an explicit property. That makes the delegate easier to reuse or test outside of a view.

Thank you @jeremy_k
Forgive my broken English[cry]

The question was clear, and the included code resolved any doubt. There's nothing to apologize for.