listview - 如何在级联中将数据绑定到列表视图的列表项

Question

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

Categories.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 数据模型。（资产：///categories.xml）

类别.xml

 <?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>

之后，我绑定了要在 List 中显示的数据。即仅类别名称。但是列表没有显示，即它只显示空白页面。

我不知道代码中有什么问题。

谢谢

Answer 1

您需要使用 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 文件有问题。现在我知道它缺少一个根节点。