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.

TheBootroo · Accepted Answer · 2013-11-12 19:46:22Z

11

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 !

answered Nov 12, 2013 at 19:46

TheBootroo

7,5342 gold badges33 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ayberk Özgür Over a year ago

Nice solutions, do you have a recommendation for components defined in c++ and exposed via qmlRegisterType() ? Can a QObject* typed Q_PROPERTY that points to this be used?

ixSci · Accepted Answer · 2013-11-05 06:40:28Z

0

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

answered Nov 5, 2013 at 6:40

ixSci

13.9k5 gold badges50 silver badges84 bronze badges

3 Comments

johnbakers Over a year ago

Suppose I have many SomeElements and I want this functionality defined in SomeElement.qml not in-line as in my code. The id would then not be available inside the SomeElement.qml since it is not an instance (yet).

ixSci Over a year ago

Add name to each SomeElement, get children of the parent(which contains those SomeElements) and find what you need by name. Then use. It's very simple

johnbakers Over a year ago

Sure, looping through all children of the parent is one way to do it, but I was hoping for direct access as per the implied behavior of my code above. But I suspect this isn't idiomatic in QML

TheHuge_ · Accepted Answer · 2013-11-06 18:06:10Z

0

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;
        }
   }
}

answered Nov 6, 2013 at 18:06

TheHuge_

1,03917 silver badges30 bronze badges

2 Comments

johnbakers Over a year ago

If you have multiple SomeElements in another file, several instances, each will have its own ID. Are you saying that the onClicked is smart enough to replace the thisElement you have in the SomeElement.qml file with the eventual instance's ID as set in another file?

TheHuge_ Over a year ago

It wont replace anything: think of the two ids as two pointers pointing to the same object.

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related