How to pass “this” from a QML element to a JS Function

Question

Similar to the this keyword in C++, I’d like to either have a QML element to pass itself into a JS function, or have it set a property on another element to itself. Is this possible?

For example:

Rectangle{
id:theParent

property var theElement

SomeElement{
id:theChild
   MouseArea {
        anchors.fill:parent
        onClicked: {
            someJsFunction(*whatGoesHere*)
            parent.theElement=*whatGoesHere*
        }
    }

Or, Consider this:

Rectangle{
id:theParent

property var theElement

SomeElement{
id:theChild
    }

Then, in SomeElement.qml:

Rectangle{
   MouseArea {
        anchors.fill:parent
        onClicked: {
            someJsFunction(*whatGoesHere*)
            parent.theElement=*whatGoesHere*
        }
}
}

In this case, the *whatGoesHere* would be the instance of SomeElement where these are being called from.

Is this possible in QML? I would think the id property would make sense, but according to the docs, you cannot query the value of the id field, and anyway the id wouldn't be available if my SomeElement was described in a separate file, and the whatGoesHere handling above appeared in that separate file rather than in a particular instance.

Answer 1

I have two complementary proposals :

First, for a single usage, pass the ID as it's basically a pointer to the item :

MouseArea {
    id: myClicker;
    onClicked: { callFunc (myClicker); }
}

Then if you need multiple items to share this behavior, that means you're using MVC so the ID will work exactly the same :

Repeater {
    model: 100;
    delegate: MouseArea {
         id: myClicker;
         onClicked: { callFunc (myClicker); }
    }
}

That is the classical part.

But to todo even better if you create your own components, keep in mind to create a 'self' helper property that does the 'this' job properly :

MouseArea { // component root definition
    id: base;

    property var self : base; // bind self on the I
}

Then use it like this :

Repeater {
    model: 100;
    delegate: MyComponent {
         onClicked: { callFunc (self); }
    }
}

Use this as often as you want !