QML-How to add another command to onClick in ui.qml?

Question

I want to add another command to itemDelegate.onClick .

Here is my code:

ListView {
        id: beam_viewer
        x: 8
        y: 18
        width: 188
        height: 374
        delegate: ItemDelegate {
            id: delegate_item
            width: 180
            height: 25
            Text {
                text: modelData
                anchors.verticalCenter: parent.verticalCenter
            }
            onClicked: img_footprint.source = applicationPath +
                       "footprints/" + modelData + ".webp"


        }
    }

I use onClicked for change my image source and I want to use modelData for myText.text . I use ui.qml and it doesn't allow to use { } after onClicked because it reject using javascript.

How can I add to onClicked myText.text = modelData.

Thank you!

I can't run your example, but I can't see any reason, why {} should not be allowed. AFAIK: Already in your example, you utilize JS (= as opposed to : ) If it does not work with the {} try call a function, in which you do all the stuff you want. — derM - not here for BOT dreams, Aug 31 '16 at 09:05
`{}` are allowed as you can see here http://doc.qt.io/qt-5/qtqml-syntax-signals.html — Kirween, Aug 31 '16 at 10:48
What does `reject using javascript` means? What was an error? There is no problem to group commands inside {}. Probably you didn't post your actual code. Anyway, read the [documentation](http://doc.qt.io/qt-5/qtqml-syntax-signals.html). — folibis, Aug 31 '16 at 10:51
OP is talking about Qt Quick Designer rejecting the JavaScript because it can't deal with it: http://stackoverflow.com/questions/30652537/what-is-the-use-of-the-ui-qml-files-in-qt5-qml/30653686#30653686 — Mitch, Aug 31 '16 at 12:59

score 0 · Accepted Answer · answered Aug 31 '16 at 12:55

You probably need to move the code that uses JavaScript (e.g. the contents of the ItemDelegate that contains the Text item and whatnot) into its own .QML file that Qt Quick Designer can't see. For example:

MainForm.ui.qml:

ListView {
    id: beam_viewer
    x: 8
    y: 18
    width: 188
    height: 374
    delegate: MyDelegate {}
}

MyDelegate.qml:

ItemDelegate {
    id: delegate_item
    width: 180
    height: 25
    Text {
        text: modelData
        anchors.verticalCenter: parent.verticalCenter
    }
    onClicked: img_footprint.source = applicationPath +
               "footprints/" + modelData + ".webp"
}

Personally I just wouldn't use ui.qml files. I know that's not a very satisfying answer, but it seems to just slow me down.

QML-How to add another command to onClick in ui.qml?

1 Answers1