CODEWITHSUNDEEP
qtqmlqtquick2
johnbakers
johnbakers

Reputation: 24771

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

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.

Upvotes: 8

Views: 7519

Answers (3)

TheBootroo
TheBootroo

Reputation: 7518

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 !

Upvotes: 11

TheHuge_
TheHuge_

Reputation: 1039

If you define your element in a separate file, then you can simply assign an id and use it. It will be valid just within the context of that instance:

SomeElement.qml

Rectangle{
   id: thisElement
   MouseArea {
        anchors.fill: parent
        onClicked: {
            someJsFunction(thisElement);
            parent.theElement = thisElement;
        }
   }
}

Upvotes: 0

ixSci
ixSci

Reputation: 13708

Instance of your SomeElement is its id property value i.e. theChild. You can use it as this. No other built-in way exists as far as I can tell. But you can try to add your own QML item hierarchy with property which will return this.

Another way is to get children of some parent and use them. So you get children, locate the child you need and use that particular instance

Upvotes: 0

Related Questions