Update backend data from QML ListModel

Question

I have a couple different lists of objects returned from an API that I use to define the items in a ListView. How do I persist any changes made from user interactions? How do I save which color is enabled, and what it's intensity is?

I've cut out some bits of code for brevity, but basically, this should display a series of vertical sliders, only one of which can be enabled at a time. The height of the slider represents the intensity of the selected color, which will affect some other part of the system.

I've refactored this from dropped code which had demonstration data directly in the ListView as a ListModel with ListElement items.

I'm not sure the getData-loop-append routine is the best option, I'm open to other ways of populating the ListView with the data, and perhaps other ways of forming the data. However, the Color object is pretty much required.

com.example.datamodels.Data.qml

QtObject {
    id: color
    readonly property string name
    readonly property color displayColor
    property bool enabled = false
    property int intensity = 100
}

property variant dataListA: [
    Color.white,
    Color.blue,
    Color.red
]

property variant dataListB: [
    Color.green,
    Color.purple,
    Color.orange
]

function getData() {
    if (something === enumA) {
        return dataListA;
    } else if (something === enumB) {
        return dataListB;
    }
}

Layout.qml

import com.example.datamodels

ListView {
    id: _list
    model: dataModel

    ListModel {
        id: dataModel
        dynamicRoles: true
        Component.onCompleted: {
            var colors = Data.get();
            for (var i=0; i < colors.length; i++) {
                append(colors[i]);
            }
        }
    }

    delegate: Widget {
        onStateChanged: {
            if (state === "enabled") {
                var items = _list.model;
                // disable any currently enabled
                for (var i = 0; i < items.count; i++) {
                    if (i !== index) {
                        var item = items.get(i);
                        if (item.enabled) {
                            item.enabled = false;
                        }
                    }
                }
            }
        }
    }
}

Widget.qml

Item {
    id: _obj
    height: _bar.height + _grabHandle.height
    width: _grabHandle.width

    property string colorName: model.name
    property bool enabled: model.enabled
    property int intensity: model.intensity
    property color glowColor: model.displayColor

    states: [
        State {
            name: "enabled"
            when: _obj.enabled
            PropertyChanges {
                target: _dragMouseArea.drag
                minimumY: 0
                maximumY: _bar.height;
            }
        },
        State {
            name: "disabled"
            when: !_obj.enabled
            PropertyChanges {
                target: _dragMouseArea.drag
                minimumY: _bar.height / 2
                maximumY: _bar.height / 2
            }
        }
    ]

    Item {
        id: _grabHandle
        height: 100
        width: 30
        x: 0
        y: _bar.height/2
        Drag.active: _dragMouseArea.drag.active

        RectangularGlow {
            id: _glow
            height: parent.height - 20
            width: parent.width - 20
            anchors.centerIn: parent
            color: _obj.glowColor
            cornerRadius: 0.0
            property real adjustedVal: 1.0 - (_grabHandle.y / _bar.height)
            glowRadius: adjustedVal * 20 + 20
            spread: 0.0
            opacity: 1.0
        }

        Text {
            id: _colorTitle
            text: _obj.colorName
            color: "#FFFFFF"
            anchors.topMargin: 0
            font.pixelSize: 22
        }

        MouseArea {
            id: _dragMouseArea
            enabled: true
            anchors.fill: parent
            anchors.centerIn: parent
            drag.target: parent
            drag.axis: Drag.YAxis
            drag.minimumY: _bar.height/2
            drag.maximumY: _bar.height/2
            drag.smoothed: false

            onReleased: {
                if (_obj.enabled) {
                    _obj.intensity = getIntensityFromHeight();
                }
            }

            onClicked: {
                _obj.enabled = !_obj.enabled
            }
        }
    }
}