Listview 如何将数据绑定到级联列表视图的列表项

我正在用cascades框架开发黑莓10应用程序。 当用户单击按钮时，我想在列表视图中显示所有类别。 因此，我创建了一个带有列表视图的qml页面

类别。qml

import bb.cascades 1.0

Page {
Container {
    background: backgroundPaint.imagePaint
    //preferredWidth: 768
    //preferredHeight: 1280
    attachedObjects: [
        ImagePaintDefinition {
            id: backgroundPaint
            imageSource: "asset:///images/list_bg.png"
        }
    ]

    //start of row 1
    Container {
        preferredWidth: 748
        preferredHeight: 145
        //background: Color.Blue;
        /*layout: StackLayout {
            orientation: LayoutOrientation.LeftToRight                
        }*/

        // Page Header
        Label {
            objectName: "categoriesHeaderLabel"
            text: "Categories"
            translationX: 0
            translationY: 40
            horizontalAlignment: HorizontalAlignment.Center
            verticalAlignment: VerticalAlignment.Center                
        }
    }

    //start of row 2
    // Create a ListView that uses an XML data model
    ListView {
        dataModel: XmlDataModel {
            source: "asset:///categories.xml"
        }
        // The ListItemComponent defines how "listItem" items
        // should appear. These items use a Container that includes a
        // CheckBox and a Label.
        listItemComponents: [
            ListItemComponent {
                type: "Category" //setting the node name
                Container {
                    preferredWidth: 748
                    preferredHeight: 50
                    background: Color.Blue

                    layout: StackLayout {
                        orientation: LayoutOrientation.LeftToRight
                    }

                    Label {
                        text: ListItemData.CategoryNameEn //setting the node 
                        verticalAlignment: VerticalAlignment.Center
                        // Apply a text style to create a title-sized font
                        // with normal weight
                        textStyle {
                            base: SystemDefaults.TextStyles.TitleText
                            fontWeight: FontWeight.Normal
                        }
                    }
                    Container {
                        horizontalAlignment: HorizontalAlignment.Fill
                        verticalAlignment: VerticalAlignment.Center
                        preferredWidth: 50
                        preferredHeight: 50
                        //background: Color.Blue

                        layout: StackLayout {
                            orientation: LayoutOrientation.RightToLeft
                        }
                        // Arrow image
                        ImageView {
                            verticalAlignment: VerticalAlignment.Center
                            translationX: 0
                            translationY: 0
                            imageSource: "asset:///images/arrow.png"
                            rightMargin: 10
                        }
                    } // end of inner Container
                }//end of outer container
             } // end of ListItemComponent
        ]//end of listItemComponents
    }//end of ListView
}//end of container

 <?xml version="1.0" encoding="utf-8"?>
<MasterData xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  xmlns:xsd="http://www.w3.org/2001/XMLSchema">
<CategoryList>
<Category>
  <CategoryId>12</CategoryId>
  <CategoryNameEn>Banks &amp; Investments</CategoryNameEn>
  <CategoryImageName>banks.png</CategoryImageName>
  <DisplayOrder>1</DisplayOrder>
</Category>
<Category>
  <CategoryId>15</CategoryId>
  <CategoryNameEn>Car Rental</CategoryNameEn>
  <CategoryImageName>cars.png</CategoryImageName>
  <DisplayOrder>2</DisplayOrder>
</Category>
<Category>
  <CategoryId>19</CategoryId>
  <CategoryNameEn>Services</CategoryNameEn>
  <CategoryImageName>services.png</CategoryImageName>
  <DisplayOrder>3</DisplayOrder>
</Category>
<Category>
  <CategoryId>18</CategoryId>
  <CategoryNameEn>Real Estate &amp; Constructions</CategoryNameEn>
  <CategoryImageName>construction.png</CategoryImageName>
  <DisplayOrder>5</DisplayOrder>
</Category>
<Category>
  <CategoryId>2</CategoryId>
  <CategoryNameEn>Hotels &amp; Apartments</CategoryNameEn>
  <CategoryImageName>hotels.png</CategoryImageName>
  <DisplayOrder>7</DisplayOrder>
</Category>
</CategoryList>
</MasterData>

}

我将为列表提供xml数据模型。(assets:///categories.xml)

categories.xml

import bb.cascades 1.0

Page {
Container {
    background: backgroundPaint.imagePaint
    //preferredWidth: 768
    //preferredHeight: 1280
    attachedObjects: [
        ImagePaintDefinition {
            id: backgroundPaint
            imageSource: "asset:///images/list_bg.png"
        }
    ]

    //start of row 1
    Container {
        preferredWidth: 748
        preferredHeight: 145
        //background: Color.Blue;
        /*layout: StackLayout {
            orientation: LayoutOrientation.LeftToRight                
        }*/

        // Page Header
        Label {
            objectName: "categoriesHeaderLabel"
            text: "Categories"
            translationX: 0
            translationY: 40
            horizontalAlignment: HorizontalAlignment.Center
            verticalAlignment: VerticalAlignment.Center                
        }
    }

    //start of row 2
    // Create a ListView that uses an XML data model
    ListView {
        dataModel: XmlDataModel {
            source: "asset:///categories.xml"
        }
        // The ListItemComponent defines how "listItem" items
        // should appear. These items use a Container that includes a
        // CheckBox and a Label.
        listItemComponents: [
            ListItemComponent {
                type: "Category" //setting the node name
                Container {
                    preferredWidth: 748
                    preferredHeight: 50
                    background: Color.Blue

                    layout: StackLayout {
                        orientation: LayoutOrientation.LeftToRight
                    }

                    Label {
                        text: ListItemData.CategoryNameEn //setting the node 
                        verticalAlignment: VerticalAlignment.Center
                        // Apply a text style to create a title-sized font
                        // with normal weight
                        textStyle {
                            base: SystemDefaults.TextStyles.TitleText
                            fontWeight: FontWeight.Normal
                        }
                    }
                    Container {
                        horizontalAlignment: HorizontalAlignment.Fill
                        verticalAlignment: VerticalAlignment.Center
                        preferredWidth: 50
                        preferredHeight: 50
                        //background: Color.Blue

                        layout: StackLayout {
                            orientation: LayoutOrientation.RightToLeft
                        }
                        // Arrow image
                        ImageView {
                            verticalAlignment: VerticalAlignment.Center
                            translationX: 0
                            translationY: 0
                            imageSource: "asset:///images/arrow.png"
                            rightMargin: 10
                        }
                    } // end of inner Container
                }//end of outer container
             } // end of ListItemComponent
        ]//end of listItemComponents
    }//end of ListView
}//end of container

 <?xml version="1.0" encoding="utf-8"?>
<MasterData xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  xmlns:xsd="http://www.w3.org/2001/XMLSchema">
<CategoryList>
<Category>
  <CategoryId>12</CategoryId>
  <CategoryNameEn>Banks &amp; Investments</CategoryNameEn>
  <CategoryImageName>banks.png</CategoryImageName>
  <DisplayOrder>1</DisplayOrder>
</Category>
<Category>
  <CategoryId>15</CategoryId>
  <CategoryNameEn>Car Rental</CategoryNameEn>
  <CategoryImageName>cars.png</CategoryImageName>
  <DisplayOrder>2</DisplayOrder>
</Category>
<Category>
  <CategoryId>19</CategoryId>
  <CategoryNameEn>Services</CategoryNameEn>
  <CategoryImageName>services.png</CategoryImageName>
  <DisplayOrder>3</DisplayOrder>
</Category>
<Category>
  <CategoryId>18</CategoryId>
  <CategoryNameEn>Real Estate &amp; Constructions</CategoryNameEn>
  <CategoryImageName>construction.png</CategoryImageName>
  <DisplayOrder>5</DisplayOrder>
</Category>
<Category>
  <CategoryId>2</CategoryId>
  <CategoryNameEn>Hotels &amp; Apartments</CategoryNameEn>
  <CategoryImageName>hotels.png</CategoryImageName>
  <DisplayOrder>7</DisplayOrder>
</Category>
</CategoryList>
</MasterData>

12
银行及；投资
banks.png
1.
15
汽车租赁
cars.png
2.
19
服务
services.png
3.
18
地产及；构造
construction.png
5.
2.
酒店及；公寓
巴布亚新几内亚酒店
7.

之后，我绑定了要在列表中显示的数据。i、 e仅限类别名称。 但列表未显示，即仅显示空页

我不知道代码里出了什么问题

---

谢谢

您需要使用groupdatamodel来加载这样的XML

    dataModel: theModel // This is the name of your groupdatamodel

    attachedObjects: [ // Attach these to the listview
        GroupDataModel {
            id: theModel
            grouping: ItemGrouping.None
            sortedAscending: true
            sortingKeys: [""] // Set this to the key you want to sort by
        },
        DataSource {
            id: theSource
            source: "" // Set this to your XML file name
            query: "/root/Category" // You'll need to add a root node to you file
            onDataLoaded: {
                theModel.insertList(data);
                console.log("List filled...")
            }
        }
    ]

---

这应该行得通，如果不行，那么您的XML文件就有问题了。现在我知道它缺少一个根节点。

日志中有错误吗？没有，我在控制台中没有发现任何错误。您好，我没有收到有关此问题的任何答复。伙计们，请解决我的问题。我无法在列表视图中加载数据。请把我的问题再读一遍。我不明白我的方法有什么问题。阅读这个答案（），看起来XML头（

）可能有问题。另外，我会尝试不使用

MasterData

元素（root是

CategoryList

）。可能将列表放在内部元素中会混淆

XmlDataModel

。