C++ object not found inside nested ListView in QML - 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?

Answer 1

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)
...
}

Answer 2

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.