Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. How to connect a property signal to a Javascript function.
QtWS25 Last Chance

How to connect a property signal to a Javascript function.

Scheduled Pinned Locked Moved QML and Qt Quick
7 Posts 2 Posters 5.4k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • ? This user is from outside of this forum
    ? This user is from outside of this forum
    Guest
    wrote on last edited by
    #1

    I'm new to Qml and having some trouble connecting a javascript handler to a property's signal. I have a C++ object with a property and signal.

    @
    class CppObject : public QObject
    {
    Q_OBJECT
    Q_PROPERTY(QVariant value READ getValue WRITE setValue NOTIFY valueChanged)

    signals:
        void valueChanged(const QVariant &);
    };
    

    @

    The objects are created through a C++ factory method and I'm able to bind the values
    and changes to Qml properties. This all works.

    @
    property CppObject obj: cppProxy.PropertyFactory("foo");

    Text
    {
        x: 100;
        y: 100;
        text: parent.obj.value;
    }
    

    @

    For some properties, I'd like to connect the valueChanged signal to a javascript function.
    I've been up and down through the Qml documentation and have tried a bunch of stuff without
    any luck. I figured something like this should work, but doesn't

    @
    function objEventHandler()
    {
    console.log('objEventHandler() ran')
    }

    Component.onCompleted:
    {
        obj.value.valueChanged.connect(objEventHandler);
    }
    

    @

    What is the best way to do this?

    1 Reply Last reply
    0
    • T Offline
      T Offline
      tzander
      wrote on last edited by
      #2

      Did you try the Connections qml object?

      1 Reply Last reply
      0
      • ? This user is from outside of this forum
        ? This user is from outside of this forum
        Guest
        wrote on last edited by
        #3

        Yes, I tried:

        @
        Connections
        {
        target: obj.value;
        onValueChanged: console.log('changed');
        }
        @

        1 Reply Last reply
        0
        • T Offline
          T Offline
          tzander
          wrote on last edited by
          #4

          that should work, maybe you forgot to emit the signal from C++ in the setter?

          1 Reply Last reply
          0
          • ? This user is from outside of this forum
            ? This user is from outside of this forum
            Guest
            wrote on last edited by
            #5

            Okay, the issue is the target should be the object, not the object's property. So, this works:

            @
            Connections
            {
            target: obj;
            onValueChanged: console.log('changed');
            }
            @

            1 Reply Last reply
            0
            • T Offline
              T Offline
              tzander
              wrote on last edited by
              #6

              ahh, good catch, I missed that :)

              1 Reply Last reply
              0
              • C Offline
                C Offline
                chrisadams
                wrote on last edited by
                #7

                Note that the "valueChanged" function is a function property of "obj" and not of the "value" property of "obj".

                So, instead of:

                @
                obj.value.valueChanged.connect(objEventHandler)
                @

                you should use

                @
                obj.valueChanged.connect(objEventHandler)
                @

                Depending on the situation, using a declarative Connections element is better, though (for example, if the target of the dynamic connection can change depending on the situation). In some situations, on the other hand, using an imperative connection can be better (as you don't incur the overhead of constructing an extra QObject).

                Cheers,
                Chris.

                1 Reply Last reply
                0

                • Login

                • Login or register to search.
                • First post
                  Last post
                0
                • Categories
                • Recent
                • Tags
                • Popular
                • Users
                • Groups
                • Search
                • Get Qt Extensions
                • Unsolved