Add elements to a ListView inside another ListView

Question

I need to insert elements in a ListView inside another ListView (via JS code inside my QML file) but when I try to access the inner ListView I get the error :

TypeError: Cannot call method 'insert' of undefined

Here is an example code to show my problem :

Item{
        id:list
        width: parent.width-210
        height: parent.height
        x:105

        Component{
            id:listDelegate

            Item {
                id:elem
                height: 100
                width: parent.width

                Item{
                    id:titre_liste
                    height: 50
                    width: parent.width
                    Text{
                        anchors.left: parent.left
                        color:"white"
                        text:titre_txt
                        font.pixelSize: 25
                        font.bold: false
                    }
                }
                Item{
                    id:listInList
                    width: parent.width-100
                    height: parent.height

                    Component{
                        id:listInListDelegate

                        Item{
                            id:element_liste
                            height: parent.height
                            width: parent.width/5
                            Text{
                                anchors.left: parent.left
                                color:"white"
                                text:element_txt
                                font.pixelSize: 25
                                font.bold: true
                            }
                        }
                    }
                    ListView {
                        id: viewin
                        anchors.fill: parent
                        model: ListModel{
                            id:listModel_in
                        }
                        delegate: listInListDelegate
                    }
                }
            }
        }
        ListView {
            id: viewglobal
            anchors.fill: parent
            model: ListModel{
                id:listModel
            }
            delegate: listDelegate
        }
    }

And here is my JS code, at the end of the QML file :

function addItem(){
    var i;
    var numListe = -1;
    var liste = "titre"
    var item = "item"

    for(i = 0;i<listModel.count;i++)
    {
        if(listModel.get(i).titre_txt === liste)
        {
            numListe = i;
        }
    }
    if(numListe === -1)//if the list doesn't exist
    {
        listModel.append({titre_txt:liste});
        numListe = listModel.count-1;
    }
    listModel.get(numListe).listModel_in.insert(0,{element_txt:item});
}

The error come from the last line of the JS code, when I try to insert a new element in the inner list. I verified that the value of "numListe" is 0 so it is not just a problem of wrong index.

How can I add elements to the inner list ?

Answer 1

There is a lot of stuff wrong with that code.

For starters - it is a mess, which is a very bad idea for someone who is obviously new at this stuff. Keep it clean - that's always a good idea regardless of your level of expertise.

listModel_in is an id and as such cannot be accessed outside of the delegate component.

That object however happens to be bound to the view's model property, so as long as the model doesn't change, you can access listModel_in via the model property. However, the view itself doesn't look like it is the delegate root object, so you have to interface it, for example by using an alias.

However, the inner model doesn't exist in the outer model, it only exists in the outer model's delegate item.

So you cannot possibly get it from listModel. You can get it from the viewglobal view, however ListView doesn't provide access by index. So you will have to set currentIndex for every index and use currentItem.

So it will look like this:

viewglobal.currentItem.modelAlias.insert(0,{element_txt:item});

But it should go without saying, you are putting data in the GUI layer, which is conceptually wrong. But it gets worse than conceptually wrong - you might not be aware of this, but ListView only creates items that it needs to show, meaning that it creates and destroys delegates as necessary. Meaning if your item falls out of view, it will be destroyed, and when it comes back into view, a new one will be created, and all the data you had in the model of the old delegate item will be lost. The view should never store data, just show it.

The inner model should be inside the outer model. However, last time I checked, QMLs ListModel didn't support model nesting, neither using declarative nor imperative syntax. If you want to nest models, I have provided a generic object model QML type you can use.