Не удается редактировать свойства объекта в файле JavaScript QML

Question

Может кто-нибудь, пожалуйста, объясните мне, что я делаю неправильно со следующей настройкой.

Идея заключается в разработке игрового движка в engine.js, а логика пользовательского интерфейса - в файле qml.

page.qml

Page {
    id: page
    SilicaGridView {
        id: listView
        model: ListModel {
            id: roleList
            Component.onCompleted: {
                Engine.addRoles(roleList);
            }
        }

        delegate: Rectangle {
            id: delegate
            border.color: model.selected ? Theme.highlightColor : Theme.primaryColor

            Label {
                text: qsTr(model.name)
            }
            MouseArea {
                anchors.fill: parent;
                onClicked: {
                    Engine.selectRole(model);
                }
            }
        }
    }
}

engine.js:

function Role() {
    this.name = "role"
    this.selected = false;
}

function addRoles(list) {
    list.append(new Role());
    list.append(new Role());
}

function selectRole(role) {
    console.log(role.selected) // <-- false
    role.selected = true;
    console.log(role.selected) // <-- false
}

Поэтому, когда я щелкаю элемент на странице, он вызывает selectRole из движка. По какой-то странной причине обновление выбранного свойства в модели фактически не обновляет модель. Почему это так?

Answer 1

Представления в Qt Quick уже имеют метод отслеживания выбранного элемента:

• currentIndex
• CurrentItem

Это означает, что вам не нужно иметь selected переменная в вашем Role объекты. Engine.js становится:

function Role() {
    this.name = "role"
}

function addRoles(list) {
    list.append(new Role());
    list.append(new Role());
}

Ваш код QML не работает (это действительно помогает, если вы предоставите рабочий пример), поэтому я позволил себе запустить его:

import QtQuick 2.3
import QtQuick.Controls 1.1

import "Engine.js" as Engine

ApplicationWindow {
    width: 500
    height: 500

    ListView {
        id: listView
        width: 100
        height: 100
        anchors.centerIn: parent

        model: ListModel {
            id: roleList
            Component.onCompleted: {
                Engine.addRoles(roleList);
            }
        }

        delegate: Rectangle {
            id: delegateItem
            border.color: ListView.isCurrentItem ? "red" : "black"
            width: listView.width
            height: 30

            Label {
                id: label
                text: qsTr(model.name)
                anchors.centerIn: parent
            }
            MouseArea {
                anchors.fill: parent;
                onClicked: {
                    listView.currentIndex = index;
                    print(index, delegateItem.ListView.isCurrentItem)
                }
            }
        }
    }
}

Обратите внимание на использование присоединенного свойства ListView isCurrentItem. Это удобное свойство, которое эквивалентно:

delegate: Rectangle {
    border.color: listView.currentIndex == index ? "red" : "black"
}