C++ object not found inside nested ListView in QML

Question

I have a ListView nested inside another ListView in my qml. Both the ListViews are being populated by a data models which I get from a C++ class SelectRoomView. This is the code for my qml file:

import bb.cascades 1.0
import Data.SelectRoomView 1.0
import "commons"


Page {
    id: pageSelectARoom

property alias currentPage: pageSelectARoom
property string propId

attachedObjects: [
    SelectRoomView {
        id: selRoom 
    }
]

onPropIdChanged: {
    selRoom.propId = propId;
}

Container {
    layout: StackLayout {
        orientation: LayoutOrientation.TopToBottom
    }

    background: Color.create("#FFFFFF")

    ScrollView{   
        horizontalAlignment: HorizontalAlignment.Fill
        objectName: "scrollView"                   

        ListView {
            id: ruleList
            dataModel: selRoom.modelRule

            listItemComponents: [   
                ListItemComponent {
                    id: outerList

                    Container{
                        Label {
                            id: outerLabel
                            text: ListItemData.ruleName
                            textStyle.fontSize: FontSize.XXSmall
                            textStyle.color: Color.Black
                        }
                        Label{
                            id: outerId
                            text: ListItemData.ruleId
                            textStyle.fontSize: FontSize.XXSmall
                            textStyle.color: Color.Black
                            visible: true
                        }

                        ListView{
                            id: roomList
                            dataModel: selRoom.modelRoom  //I get the message ReferenceError: Can't find the variable: selRoom
                            listItemComponents: [

                                ListItemComponent {
                                    id: innerList


                                    Label{
                                        id: innerLabel
                                        text: ListItemData.name
                                        textStyle.fontSize: FontSize.XXSmall
                                        textStyle.color: Color.Black

                                    }
                                }
                            ]
                        }
                    }

                }     
            ]

        }

    }

  }
}

Upon running the app, ruleName of ruleList shows but not the innerLabel of roomList. The console displays the following message: asset:///SelectARoom.qml:100: ReferenceError: Can't find variable: selRoom asset:///SelectARoom.qml:100: ReferenceError: Can't find variable: selRoom

i.e., selRoom is not in scope for roomList (the nested list). What am I doing wrong?

1. Try `pageSelectARoom.selRoom.modelRoom`? 2. Create alias to `selRoom.modelRoom` at root level and try using that? — Sergei Eliseev, Dec 02 '13 at 08:59

score 0 · Answer 1 · answered Dec 02 '13 at 10:51

I cannot find a documentation of the ListView.listItemComponents property but it looks like some kind of delegate.

If the sub-list is part of the first list's delegate, it might not have access to global variables. The QML docs state that delegates can access their position index and the variables of the model only.

Try to access other values outside the delegate's scope like to see whether that works

ListView {
    id: roomList
    Component.oncompleted: console.log(ruleList.height)

    ...
}

score 0 · Answer 2 · answered Dec 05 '13 at 05:04

I found a solution, but it is not very efficient. The following is the new code:

Page {
id: pageSelectARoom

property alias currentPage: pageSelectARoom
property string propId

attachedObjects: [
    SelectRoomView {
       id: selRoom 
    }
]

onPropIdChanged: {
    selRoom.propId = propId;
}

Container {
    layout: StackLayout {
    orientation: LayoutOrientation.TopToBottom
}

background: Color.create("#FFFFFF")

ScrollView{   
    horizontalAlignment: HorizontalAlignment.Fill
    objectName: "scrollView"                   

    ListView {
        id: ruleList
        dataModel: selRoom.modelRule

        function getModelMain() {           //the object 'selRoom' is accessible from this function.
             return selRoom.modelRoom;
        }

        listItemComponents: [   
            ListItemComponent {
                id: outerList

                Container{
                    id: ruleContainer

                    function getModel() {        
                        return ruleContainer.parent.getModelMain();  
                    }                       

                    Label {
                        id: outerLabel
                        text: ListItemData.ruleName
                        textStyle.fontSize: FontSize.XXSmall
                        textStyle.color: Color.Black
                    }
                    Label{
                        id: outerId
                        text: ListItemData.ruleId
                        textStyle.fontSize: FontSize.XXSmall
                        textStyle.color: Color.Black
                        visible: true
                    }

                    ListView{
                        id: roomList
                        dataModel: ruleContainer.getModel() 
                        listItemComponents: [

                            ListItemComponent {
                                id: innerList


                                Label{
                                    id: innerLabel
                                    text: ListItemData.name
                                    textStyle.fontSize: FontSize.XXSmall
                                    textStyle.color: Color.Black

                                }
                            }
                        ]
                    }
                }

            }     
        ]

    }

   }

  }
}

Is there a better way to do this or is there an alternate more efficient solution? Waiting for response. Thanks.

C++ object not found inside nested ListView in QML

2 Answers2