ListView在blackberry cascades qml中未更新

Question

我有一个列表视图，它的数据是我从api调用中接收到的

1

2

3.

4.

5

在我单击一项(例如3项)之后，我进行api调用，该api调用将提供订单中的数据

3.

1

2

4.

5

我也需要展示同样的东西。但是我的列表视图当前填充如下

3.

1

3.

4.

5

我检查了显示列表视图项目数据的日志，它按正确的顺序打印

ListView {
              id: contactListView
              dataModel: contactsData

              listItemComponents: [
                        ListItemComponent 
                          {
                            id: homeListComponent
                            type: "item"
                            CustomListItemHomePage
                             {

                                id: listCell
                                background: ListItemData.colors
                                text:  ListItemData.name;

                               onClicked: {

                                       listCell.ListItem.view.fetchListFromLV();

                                          }

                                }
                           }

                    ]

 function fetchListFromLV()
               {
                       //some codes that makes the api call here

               }
}

 attachedObjects: [
  GroupDataModel {
                    id: contactsData
                    sortingKeys: [ "last" ]
                    grouping: ItemGrouping.None

                },
 Communication {
                    id: requestPost
                    onComplete: {

            //gets the api call response here

             var response = JSON.parse(info);
              console.log(response);

          if (response.hasOwnProperty('contacts')) 
                 {
                            contactsData.clear();
                          //contactListView.dataModelChanged(contactsData);
                            var contacts = response["contacts"];

        for (var cntNames in contacts) 
                           {

                                contactsData.insert({
                                        name: contacts[cntNames].toString(),
                                        last: contactsData.size(),
                                        colors: setBgColor(contactsData.size())
                                    })


                            }
                  }
                 //This log prints data in correct order i.e 3 1 2 4 5 but the data displayed in list view prints in wrong order 3 1 3 4 5  
                for (var i=0;i<contactsData.size();i++)
                                        {
                                            console.log(contactsData.data([i]).name);
                                        }
           }
]

Answer 1

**Follow This Code**

import bb.cascades 1.2

Page {
    onCreationCompleted: {
        fillGroupDataModel()
    }
    Container {
        ListView {
            id: contactListView
            dataModel: contactsData

            listItemComponents: [
                ListItemComponent {
                    id: homeListComponent
                    type: "item"
                    Container {
                        horizontalAlignment: HorizontalAlignment.Fill
                        verticalAlignment: VerticalAlignment.Fill
                        background: ListItemData.color_default_bg
                        Container {
                            horizontalAlignment: HorizontalAlignment.Fill
                            verticalAlignment: VerticalAlignment.Center
                            topPadding: 10
                            bottomPadding: 10
                            leftPadding: 10
                            rightPadding: 10
                            layout: StackLayout {
                                orientation: LayoutOrientation.LeftToRight
                            }
                            Label {
                                id: mLableColorId
                                text: ListItemData.color_id
                                verticalAlignment: VerticalAlignment.Center
                            }
                            Label {
                                id: mLableColorName
                                text: ListItemData.color_name
                                verticalAlignment: VerticalAlignment.Center
                            }
                        }
                        Divider {
                            horizontalAlignment: HorizontalAlignment.Fill
                        }

                    }
                }

            ]
            onTriggered: {
                var selectedItem = dataModel.data(indexPath);
                var selectedColor = selectedItem.color_code
                var count = contactListView.dataModel.childCount(0)
                for (var i = 0; i < count; i ++) {
                    var tempImdexPath = [ i ]
                    var selectedItem = dataModel.data(tempImdexPath);
                    selectedItem.color_default_bg = selectedColor
                    contactListView.dataModel.updateItem(tempImdexPath, selectedItem);
                }
            }

        }

    }
    function fillGroupDataModel() {
        contactsData.clear()
        contactsData.insert({
                "color_id": 1,
                "color_code": Color.Blue,
                "color_name": "Blue",
                "color_default_bg": Color.White
            });
        contactsData.insert({
                "color_id": 2,
                "color_code": Color.Green,
                "color_name": "Grean",
                "color_default_bg": Color.White
            });

        contactsData.insert({
                "color_id": 3,
                "color_code": Color.Red,
                "color_name": "Red",
                "color_default_bg": Color.White
            });
        contactsData.insert({
                "color_id": 4,
                "color_code": Color.Gray,
                "color_name": "Gray",
                "color_default_bg": Color.White
            });
        contactsData.insert({
                "color_id": 5,
                "color_code": Color.Cyan,
                "color_name": "Cyan",
                "color_default_bg": Color.White
            });
    }
    attachedObjects: [
        GroupDataModel {
            id: contactsData
            sortingKeys: [ "color_id" ]
            sortedAscending: true
            grouping: ItemGrouping.None

        }

    ]
}