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.