Important: Please read the Qt Code of Conduct -

QmlListProperty access in javascript

  • Hi,
    I have a C++ class which contains a list of objects. I want this list to be accessible in my QML interface, so a defined a property of type QQmlListProperty. When using this property as the model of a listview, everythin works fine. However, if I try to use this list in a javascript function, I can't do anything - a basic call to count() returns 'undefined'.

    The following example may clarify why I'm trying to do :
    Here's my Bar class - a simple object with a single property returning a string :

    @class Bar : public QObject
    explicit Bar(const QString& name, QObject *parent = 0) : QObject(parent), _name(name) {}
    explicit Bar(QObject *parent = 0) : QObject(parent), _name("") {}

    Q_PROPERTY(QString name READ name NOTIFY nameChanged)
    QString name() const {return _name;}

    void nameChanged();
    QString _name;


    Here's my Foo class, which contains a list of Bars :
    @class Foo : public QObject
    explicit Foo(QObject *parent = 0) : QObject(parent) {}

    void initBars()

    _bars.append(new Bar("Banana"));
    _bars.append(new Bar("Apple"));
    _bars.append(new Bar("Raspberry"));
    Q_EMIT barsChanged();

    Q_PROPERTY(QQmlListProperty<Bar> bars READ bars NOTIFY barsChanged)
    QQmlListProperty<Bar> bars() { return QQmlListProperty<Bar>(this, _bars);}

    void barsChanged();
    public slots:

    QList<Bar*> _bars;

    Here my QML file - foo is a context property set in my main.cpp :
    @import QtQuick 2.2
    import QtQuick.Controls 1.1
    import test.Bar 1.0
    import test.Foo 1.0

    ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Foobar")

    ListView {
        model: foo.bars
        id: listView
        anchors.centerIn: parent
        anchors.fill: parent
        delegate: Row {
            id: row
            Text {
                text: name
    Component.onCompleted: {
        for(var i = 0; i < foo.bars.count; i++)


    And finally, here's my main :
    @int main(int argc, char *argv[])
    QApplication app(argc, argv);
    qmlRegisterType<Foo>("test.Foo", 1, 0, "Foo");
    qmlRegisterType<Bar>("test.Bar", 1, 0, "Bar");
    QQmlApplicationEngine engine;
    Foo myFoo;
    engine.rootContext()->setContextProperty("foo", &myFoo);

    return app.exec();


    When I launch this example, the listview is correctly filled with 3 items - Banana, Apple, Raspberry.
    However, the javascript function called on Component.onCompleted only displays "qml: undefined" in the console.
    What am I doing wrong ? how can I use my list in javascript ?

    Thank you for your answers.

  • Hi,

    The qmllistproperties work slightly in a different way than regular. You need to implement a number of static functions to get everything working. Check the documentation, it has examples to get you started!

Log in to reply