Manipulating a model inside a ListView with Javascript

[tobias.renz]

Hi Everybody,

I want to remove an element from a model inside of a ListView with JavaScript.

@
ListView {
id: storageListView
model: storageModel
}
@

If I manipulate items inside the model it works (e.g. my elements in the model have a property named show):

listView.model[listView.currentIndex].show = true

=> The ListView updates

Now I would want to remove an item directly e.g. I tried to use the remove function from ListModel qml element but I doesn't work. The method is not known.

@listView.model.remove(listView.currentIndex)@

Also I tried to use javascript array method on listView.model since I access it is accessed like a javascript array (see example with show property above). But It doesn't work either:

@listView.model.splice(listView.currentIndex, 1)@

It is important to me to manipulate the model inside of ListView and not manipulating my model outside of listView and the setting it new with something like:

@
listView.model = myManipulatedModel
@

The reason is: If I set the model to a new model the ListView will reposition elements in an unwanted way.

Any help here would be much appreciated :).

Tobias

[favoritas37]

The above functions that you mention are working correctly for ListModel components.

So if i were you, i would try to avoid the referencing of the model through the listView model and use it directly. Meaning of which, try to call

@
listView.model.remove(listView.currentIndex)
@

by using direct reference to the model
@
modelReference.remove(listView.currentIndex)
@

[tobias.renz]

Thanks very much for your reply :)!

I guess you are refering to the following:

@
ListView {
id: storageListView
model: storageModel
}

ListModel {
id: storageModel
ListElement {
name: "Apple"
cost: 2.45
show: true
}
ListElement {
name: "Orange"
cost: 3.25
show: true
}
ListElement {
name: "Banana"
cost: 1.95
show: true
}
}
@

storageModel.remove(listView.currentIndex)

=> This would work in order to remove the element. But storageModel (which is an id not a reference) is given to ListView with a property binding:

@
model: storageModel
@

This means that if I manipulate storageModel it will emit a change which will lead to the reevaluation of the model property binding and the storageModel will be copied over to the model property of listView. QML isn't working with references here (one could say unfortunatly but it has advantages as well ;)).

Then as I said: It is important to me to manipulate the model inside of ListView and not manipulating my model outside of listView and the setting it new. Which is what I described above.

The reason is that If I the model updates and is copied over to the ListView model there will be a refresh to the listView. The listView positions itself at index 0 and then back to currentIndex. But the currentIndex Element will e.g. not be in the middle of listView but at the bottom afterwards.

But thanks again for taking the time to reply.

Tobias