JavaScript references in QML

[mzimmers]

Hi all -

I have a QML object (defined in C++) with a large number of members, most of which are enums. The values are selected using a ListView with RadioDelegates, which appear in a Drawer.

I'm trying to write a utility component to display the lists and return the selection. Where I'm stuck is how to return the selection. From the reading I've done, it appears that I need to use JavaScript references, but I can't make it work.

I access the utility list via a Component:

Component {
    id: actionComponent
    ScheduleList {
        onFinished: // signal within ScheduleList
            (ind, selection) => {
                        // need some kind of assignment HERE.
                        scheduleDetailsStackView.clear()
                        scheduleDetailsDrawer.close()
                    }
    }
}

And I invoke this in several places, like this:

Button {
    onClicked: {
        scheduleDetailsStackView.clear()
        scheduleDetailsStackView.push(actionComponent, { "listModel": listPanel.actionModel })
        scheduleDetailsDrawer.open()
    }
}

So, how can I get my utility list to assign the selected value to a particular member of my object? I've implemented a callback that can assign the value to a hard-coded variable, but doing it this way would mean I'd need a separate callback for each member of the object.

Is this the best I can do, or is there some JS magic that I can use?

Thanks for any ideas...

[mzimmers]

Fixed it -- I added a bool to my parent property to tell me whether this button belongs to to the start or end panel, and I check that bool in my callback.

Button {
    id: action
    buttonText: actionButtonLabel
    onClicked: {
        stackView.clear()
        stackView.push(
                    actionComponent,
                    {
                        "listModel": scheduleActionPanel.actionModel,
                        "listIndex": isStartPanel ? newSchedule.startAction : newSchedule.endAction,
                        "buttonGroup": startStopGroup,
                        "titleText": scheduleActionPanel.actionTitle,
                        "callback": ((i) => {
                                         if (isStartPanel) {
                                             newSchedule.startAction = i
                                         } else {
                                             newSchedule.endAction = i
                                         }
                                     }
                                     )
                    }
                    )
    }
}

If necessary, the bool could be replaced by an int, and the callback logic made more elaborate.

[mzimmers]

I've solved part of it, by adding a callback function to my ScheduleList component:

// ScheduleList.qml
ColumnLayout {
    required property var listModel
    required property var callback

    ButtonBar { // custom button bar
        onButtonClicked: (ind) => {
                             callback(list.currentIndex)
                         }
        }
    }
    // ...
}

and invoking it with an arrow function, with different arguments for each button:

Button {
    id: actionButton
    onClicked {
        scheduleDetailsStackView.push(
                    actionComponent,
                    {
                        "listModel": listPanel.actionModel,
                        "callback": ((i) => newSchedule.startAction = i )
                    }

Button {
    id: whenButton
    onClicked {
        scheduleDetailsStackView.push(
                    actionComponent,
                    {
                        "listModel": listPanel.whenModel,
                        "callback": ((i) => newSchedule.startWhen = i )
                    }
                    )
// and so on.

I said "solved part of it" above, because I'm not yet finished -- these buttons that use the list component are themselves inside a Component that is re-used (for start and stop operations). Now I have to figure out how to tell this component which object members I want to use. I think I still need to use JS references, so anyone with some experience here, please feel free to advise.

Thanks...

[mzimmers]

Fixed it -- I added a bool to my parent property to tell me whether this button belongs to to the start or end panel, and I check that bool in my callback.

Button {
    id: action
    buttonText: actionButtonLabel
    onClicked: {
        stackView.clear()
        stackView.push(
                    actionComponent,
                    {
                        "listModel": scheduleActionPanel.actionModel,
                        "listIndex": isStartPanel ? newSchedule.startAction : newSchedule.endAction,
                        "buttonGroup": startStopGroup,
                        "titleText": scheduleActionPanel.actionTitle,
                        "callback": ((i) => {
                                         if (isStartPanel) {
                                             newSchedule.startAction = i
                                         } else {
                                             newSchedule.endAction = i
                                         }
                                     }
                                     )
                    }
                    )
    }
}

If necessary, the bool could be replaced by an int, and the callback logic made more elaborate.