Two-way binding in QML user control

Viewed 222

I'm making a user control which has a property, which I modify with functions. The property is binded to another property in Main.qml file. In a real-life project, it is binded to a property of a ViewModel. I need to have a two-way binding allowing me to change the ViewModel's property from qml view and the view's property from the view model.

Main.qml:

property int myProperty: 0

Column {
    MyControl {
        value: myProperty
    }
    MouseArea {
        width: 200; height: 100
        onClicked: myProperty = 0
    }
}

MyControl.qml:

Item {
    id: root
    property int value: 0
    Row {
        MouseArea {
            width: 100; height: 100
            onClicked: root.value++
        }
        MouseArea {
            width: 100; height: 100
            onClicked: root.value--
        }
    }
}

But in fact, when I change MyControl's value property with root.value++, it brokes the binding and the changes stop passing between the properties.

Is there a way to implement it in a declarative way, without cross-setting it by ...Changed signals?

0 Answers
Related