Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Component load modelData failed



  • 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



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


  • @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



  • 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.



  • @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]



  • @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.


Log in to reply