The data of the model of the TableView do not change after I edit it on the ui

tham

Trying to send the data after changed on the table back to the c++, but when I try to read the data from the ListModel, I find out they do not change at all

import QtQuick 2.9
import QtQuick.Controls 1.4 as Control1
import QtQuick.Controls 2.2 as Control2

import QtQuick.Layouts 1.3

Rectangle{
    id: root

    width: 600
    height: 480

    ListModel {
        id: sourceModel

        ListElement{
            select : false
        }
    }

    ColumnLayout{
        anchors.fill: parent

        Control1.TableView {
            id: tableView

            frameVisible: false
            sortIndicatorVisible: false

            Layout.minimumWidth: 400
            Layout.minimumHeight: 240
            Layout.preferredWidth: 600
            Layout.preferredHeight: 400
            Layout.fillWidth: true

            rowDelegate: Item{
                width: 100
                height: 50
            }

            Control1.TableViewColumn {
                id: selectColumn
                title: "Select"
                role: "select"
                movable: false
                resizable: true
                width: 100
                delegate: Control2.CheckBox {
                    id: selectBox
                    checked: styleData.value
                }
            }

            model: sourceModel
        }

        Control2.Button{
            id: applyChangeOnDBBtn
            text: qsTr("Apply the change on database")
            onClicked: {
                for(var i = 0; i !== tableView.model.count; ++i){
                    console.log(sourceModel.get(i)["select"])
                }
            }
        }
    }
}

I expect the results should be changed after the check/unchecked on the checkbox, but when I click on the "applyChangeOnDBBtn", it always give me "false". How could I make the TableView inform the ListModel, "the data has been changed"? Should I override QAbstractItemModel in this case?Thanks

tham

The easiest solution I come up is update the data of the model when the data of the view change

Control1.TableViewColumn {
                id: selectColumn
                title: "Select"
                role: "select"
                movable: false
                resizable: true
                width: 100
                delegate: Control2.CheckBox {
                    id: selectBox
                    checked: styleData.value
                    onClicked: {
                        sourceModel.get(styleData.row).select = selectBox.checked
                    }
                }
            }

Do we have a more proper solution?

ps : I think model and view of QWidget is much more mature than qml, I prefer qml to finish the task because the customers like the view and feel of mobile app.