주어진 XML 모델의 목록보기

Question

안녕하세요 저는 Blackberry 10 cascades 개발을 처음 사용합니다.

아래의 데이터 모델 (assests 폴더에 있음)을 사용하여 목록을 만들고 싶습니다.

Categories.xml 내가 목록 항목으로 만 CategoryNameEn을 표시 할

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

.

main.qml에서 나는 이와 같이 지정했습니다.

// Create a ListView that uses an XML data model 
ListView { 
    dataModel: XmlDataModel { 
     source: "asset:///categories.xml" 
    } 
    // The ListItemComponent defines how "listItem" items should appear. 
    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 

출력은 아래 이미지와 같아야합니다.

는 그러나 목록이 비어 있습니다. CategoryNameEn이 목록에 바인딩되어 있지 않습니다. 내 코드에서 무엇이 잘못되었는지 알 수 없습니다. 내 문제를 해결하십시오.

Answer 1

여기에 XML을 수정하지 않은 방법을 설명하는 작은 예제가 있습니다. XML :

<model> 
    <item CategoryNameEn="Banks &amp; Investments" CategoryId="12" CategoryImageName="banks.png" DisplayOrder="1"/> 
    <item CategoryNameEn="Banks &amp; Investments2" CategoryId="33" CategoryImageName="banks2.png" DisplayOrder="2" />  
</model> 

QML :

ListView { 
    dataModel: XmlDataModel { 

     source: "asset:///categories.xml" 
    } 
    // The ListItemComponent defines how "listItem" items should appear. 
    listItemComponents: [ 
     ListItemComponent { 
      type: "item" //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 

([폭포에서 목록보기의 목록 항목에 데이터를 바인딩하는 방법]의