QML binding to an array element

I have a width property on a QML Rectangle that is set based on another Rectangle with an id of mainwindow and one of the array properties of mainwindow:

width: mainwindow.width/mainwindow.numColsPerRow[positionRow]

This works at the time my rectangle is setup; that is, the element inside the array numColsPerRow is correctly involved.

However, after this Rectangle is setup, if I change the values inside numColsPerRow the width of this Rectangle does not have any effect.

Does QML not allow property bindings to array elements?

Solution 1:

Values in a var JS array don't emit and 'changed' signal when you call :

my_array  [n] = value;

In order to get the array property notified to every code using it you must use this trick :

var tmp =  my_array;
tmp [n] = value; // you can do multiple changes, and also push/splice items
my_array = tmp;

This way, QML engine will emit the signal and other bindings using my_array will be notified and updated.

PS: you can't use a ListModel for this, because you won't have a way to get a particular item in the model using a key like array or map do. Models are meant to be used with a MVC view...