component loaded with Loader inside a delegate, how to access model?

lqsa

Inside a delegate that has a Loader, how the component loaded by Loader can access the model?

ComponentBase.qml:

Item {
   ...
   property Component insideDelegateComponent
   ...
   ListView {
      ...
      delegate: Item {
          ...
          Loader {
              sourceComponent: insideDelegateComponent
          }
          ... 
      }
   }
   ...
}

ComponentPaintDelegate.qml

Text {
    text: model.name
}

DrawView.qml

ComponentBase {
   insideDelegateComponent : ComponentPaintDelegate {
      ...
   }
}

Gives the error: Cannot read property 'name' of undefined

sylc

@lqsa Loader has a signal 'loaded' so you could make a signal handler:

Loader {
   ...
   onLoaded: {
      item.role1 = role1;
      item.role2 = role2;
   }
}

Obviously the component that you load must have these properties roleX.

lqsa

@sylc It doesn't work with the model. I suppose that the problem is that the model is attached from the context when the component is created and created bindings of their properties.

sylc

Well, the problem is the model's roles aren't visible from the loader inside the delegate. Here's a code snippet where I've shown properties trick.

Does it fix the issue?

import QtQuick 2.7

Item {
    width: 640
    height: 480

    ListModel {
        id: peopleModel
        ListElement { name: "Samantha"; age: "21" }
        ListElement { name: "Joe"; age: "33" }
        ListElement { name: "Alex"; age: "32" }
    }


    Column {
        anchors.fill: parent
        Repeater {
            anchors.fill: parent

            model: peopleModel

            Loader {
                sourceComponent: aDelegate
                onLoaded: { item.name = name; item.age = age; }
            }
        }
    }

    Component {
        id: aDelegate
        Text {
            property string name
            property int age
            x: 5
            height: 15
            text: name + "," + age
        }
    }
}

jpnurmi

Loader creates an extra context for the dynamically instantiated item. Consequently, if I remember correctly, a property defined in the Loader element itself is visible to the loaded item. The styling of Qt Quick Controls 1.x is based on this technique.

Loader {
    property string modelName: model.name
    sourceComponent: exampleComponent
}

Component {
    id: exampleComponent
    Text {
        text: modelName
    }
}

sylc

@jpnurmi Yes, you are right. That's even better!

import QtQuick 2.7

Item {
    width: 640
    height: 480

    ListModel {
        id: peopleModel
        ListElement { name: "Samantha"; age: "21" }
        ListElement { name: "Joe"; age: "33" }
        ListElement { name: "Alex"; age: "32" }
    }

    Column {
        anchors.fill: parent
        Repeater {
            anchors.fill: parent

            model: peopleModel

            Loader {
                sourceComponent: aDelegate
                property string modelName: name
                property int modelAge: age
            }
        }
    }

    Component {
        id: aDelegate
        Text {
            x: 5
            height: 15
            text: modelName + "," + modelAge
        }
    }
}

lqsa

It works!

Only remarks that the component delegated can't has model.<property>, it must be only <property> and the Loader must have a property for every model property, not a model property.

Thank you very much!

jpnurmi

With a little bit of trickery, using the same technique you should be able to expose 'model' as is to the loaded item:

delegate: Item {
    property var itemModel: model // read 'model' from the delegate's context
    width: loader.width
    height: loader.height

    Loader {
        id: loader
        property var model: parent.itemModel // inject 'model' to the loaded item's context
        sourceComponent: exampleComponent
    }
}

Component {
    id: exampleComponent
    Text {
        text: model.name
    }
}