how to automatically update a property?

mzimmers

Hi all -

I have a display element whose visibility depends on the length of a JS array. If the array has 2 elements, my display should be true; if not, it would be false.

Here's how I'd like to do it:

Rectangle {
	id: valvesPane
	visible: (equipmentEdit.spaceAssignments.length === 2) // doesn't update

I've created a workaround -- whenever the JS array is modified, I call a function:

function processSpaceSelection(spaceUuid, add) {
	if (add) {
		if (spaceAssignments.length === 2) {
			valvesPane.visible = true
		}
	}
	else {
		valvesPane.visible = false
	}
}

This works, but seems kind of cumbersome. Is there a better way to do this?

Thanks...

GrecKo

@lemons said in how to automatically update a property?:

myArray = myArray

calling myArrayChanged() would also work.

sierdzio

@mzimmers your first code should work. Are you sure a property change signal is emitted when spaceAssignments is modified?

J.Hilk

@mzimmers it should work,

take this example:

Window {
    id:root
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    property var myArray: []
    onMyArrayChanged: console.log(myArray)
    Column{
        Button{
            id:btn1
            onClicked: myArray += ["a"]
        }
        Text {
            id: name
            text: myArray.length
        }
    }
}

lemons

@J-Hilk Note: If you use .push(), add a .slice(0) to trigger the onChanged() signal:

Button {
    text: "push item and force array update"
    onClicked: {
        myArray.push("a")
        myArray = myArray.slice(0)
    }
}

EDIT:
Just noticed it also works with simple re-assignment.
I always used the shallow copy with .slice(0).

Button {
    text: "push item and force array update"
    onClicked: {
        myArray.push("a")
        myArray = myArray
    }
}

This would also work, but I don't like to use concat for readability reasons:

Button {
    onClicked: {
        myArray = myArray.concat("a")
    }
}

P.S.: I still don't know why QML does not pick up .push() automatically.

GrecKo

@lemons said in how to automatically update a property?:

myArray = myArray

calling myArrayChanged() would also work.

mzimmers

@sierdzio said in how to automatically update a property?:

@mzimmers your first code should work. Are you sure a property change signal is emitted when spaceAssignments is modified?

spaceAssignments is just a JS array defined (in another file) like this:

    property var spaceAssignments: []

Does QML build in a signal for when this is changed? I didn't think so.

lemons

@GrecKo said in how to automatically update a property?:

@lemons said in how to automatically update a property?:

myArray = myArray

calling myArrayChanged() would also work.

Thanks for pointing it out, I was thinking too complicated.
Most likely because QtCreator does not auto-suggest it :D

But why doesn't Qt automatically call the signal on .push()?

@mzimmers the signal should be there, but not automatically emitted if you use push() on the array:

Window {
    id: app
    width: 640
    height: 480
    visible: true

    Dummy {
        id: dummyComponent
        // Dummy.qml
        // Item { property var myArray: [] }
    }

    Column {
        Rectangle {
            color: "red"
            width: 100
            height: 100
            visible: dummyComponent.myArray.length === 2
        }

        Button {
            text: "push item and force array update"
            onClicked: {
                dummyComponent.myArray.push("a")
                dummyComponent.myArrayChanged()
            }
        }
        Text {
            text: dummyComponent.myArray.length
        }
    }
}

mzimmers

Thanks for all the suggestions, everyone. I decided that emitting the signal directly was the most straightforward way to go. I didn't realize that any of those possibilities even existed...I guess I haven't found the documentation that explains this.