Manipulating a model inside a ListView with Javascript



  • 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



  • 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)
    @



  • 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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.