Avoid junk in GridView when dynamically changing XmlListModel's xml property
-
I use a GridView (with XmlListModel) to display the items belong to the category which is selected in a ListView. Each time an item is selected in the ListView, I dynamically change the xml property of the XmlListModel to the corresponding xml data for the category.
The problem is, when dynamically changing the xml property, it left junk in the GridView, as you can see in the screencast (I've repeatedly changed between the second and third category): http://herophuong.co.cc/qml-gridview-error.ogv
What should I do to avoid this? (May be clear the GridView after each change but how?)
Here is some code for ones who need it:
The GridView:
@GridView {
id: catView
cellHeight: 160
cellWidth: 160
model: XmlListModel {
id: dataModel
query: "/methodResponse/params/param/value/array/data/value"
XmlRole {name: "postId"; query:"struct/member[1]/value/string/number()"}
XmlRole {name: "title"; query: "struct/member[2]/value/string/string()"}
}
delegate: Rectangle {
id: wrapper2
width: parent.width
height: parent.height
border.width: 1
border.color: "white"
color: "transparent"
Column {
spacing: 5
Text {text: postId;}
Text {text: title;}
}
}@The Timer (I use timer to wait for the xml data to be ready):
@Timer {
id: fetcher
interval: 16
running: true
repeat: true
onTriggered: {
if (Script.ready === XMLHttpRequest.UNSENT) {
Script.localtest() // start fetching data on localhost
}
if (Script.ready === XMLHttpRequest.DONE) {
dataModel.xml = "" // try set this to blank to clear the model but it has no effect
dataModel.xml = Script.data
fetcher.stop()
Script.ready = XMLHttpRequest.UNSENT // reset Script object
}
dataModel.reload() // also try reload() the model but it also has no effect
}
}@There's also a javascript function to set Script.category to other value before fetching data with Script.localtest()