How to load different components with different properties in the same Loader?

jeanmilost

In a view, I wrote the following Repeater:

Repeater
{
    // common properties
    id: rpPageContent
    objectName: "rpPageContent"
    model: lmPageContent

    Loader
    {
        /// Called when a new component was loaded
        Component.onCompleted:
        {
            // load the component
            if (isBox)
                setSource(fileName, {
                    "id":            boxId,
                    "objectName":    boxId,
                    "x":             xPos,
                    "y":             yPos,
                    "width":         w,
                    "height":        h,
                    "m_ScaleFactor": scaleFactor,
                    "m_PageContent": rcPageContent,
                    "boxProxy.uid":  uid
                });
            else
                setSource(fileName, {
                    "id":            linkId,
                    "objectName":    linkId,
                    "m_From":        from,
                    "m_To":          to,
                    "m_ScaleFactor": scaleFactor,
                    "m_PageContent": rcPageContent,
                    "linkProxy.uid": uid
                });

            // succeeded?
            if (!item)
            {
                console.error("Add component - FAILED - " + fileName);
                return;
            }
        }
    }
}

With the above Loader I'm trying to load 2 different components, which are defined in 2 different files, and have different properties.

I load the first component with this code:

lmPageContent.append({"fileName":    "TSP_Box.qml",
                      "isBox":       true,
                      "boxId":       boxId,
                      "xPos":        x,
                      "yPos":        y,
                      "w":           width,
                      "h":           height,
                      "scaleFactor": m_ScaleFactor,
                      "uid":         uid});

And the second component with this code:

lmPageContent.append({"fileName":    "TSP_Link.qml",
                      "isBox":       false,
                      "linkId":      linkId,
                      "from":        from,
                      "to":          to,
                      "scaleFactor": m_ScaleFactor,
                      "uid":         uid});

However there is no way to load the second component, although the first one is loaded without problems. Some properties are not found in the Loader's Component.onCompleted function, like the "linkId", the "from" and the "to" ones.

I cannot figure out what I'm doing wrong. Can someone point me what is incorrect in the above code, or post a demo about how to load different components with different properties in the same Loader?

jeanmilost

@fcarney Thank you for your answer. Finally I could resolve my issue by getting the Loader created by the Repeater, and to calling its setSource() function directly, with the correct properties, adapted for each component I need to load.

fcarney

@jeanmilost said in How to load different components with different properties in the same Loader?:

the "from" and the "to" ones.

You can ONLY pass what the Loader gets to the delegates. Is the loader getting a "from" and "to" passed to it from the model?
This is not intended to set things in the delegate. It is to pass references to the delegate that the Loader can see. Like the references passed to a delegate from a model. The quoted string is the property it will appear as, this is an injected property and doesn't have to exist in the delegate. The value passed is the injected properties the Loader sees from the model or any other property the Loader can see.

jeanmilost

@fcarney Thank you for your answer. Finally I could resolve my issue by getting the Loader created by the Repeater, and to calling its setSource() function directly, with the correct properties, adapted for each component I need to load.