Qml and JavaScript

Question

alex_lipJune 18, 2018, 4:03 a.m.

Qml and JavaScript

Разбираю пример по поводу разницы между qml и javascript

Text {
id: label
x: 24; y: 24
// custom counter property for space presses
property int spacePresses: 0
text: "Space pressed: " + spacePresses + " times"
// (1) handler for text changes
onTextChanged: console.log("text changed to:", text)
// need focus to receive key events
focus: true
// (2) handler with some JS
Keys.onSpacePressed: {
increment()
}
// clear the text on escape
Keys.onEscapePressed: {
label.text = ''
}
// (3) a JS function
function increment() {
spacePresses = spacePresses + 1
}
}

The difference between the QML : (binding) and the JavaScript = (assignment) is, that the binding is a
contract and keeps true over the lifetime of the binding, whereas the JavaScript assignment (=) is a one time value
assignment. The lifetime of a binding ends, when a new binding is set to the property or even when a JavaScript
value is assigned is to the property. For example a key handler setting the text property to an empty string would
destroy our increment display:

Keys.onEscapePressed: {
label.text = ''
}

В принципе понятно, что командой

label.text = ''

мы уничтожили биндинг для label. Но когда я немного подправил

Keys.onEscapePressed: {
label.text = "Space pressed: " + spacePresses + " times"
}

- то есть по сути по ESC я присваиваю полю label - то же самое что и было в text. Однако я не получил того же самого результата. У меня на экране инкремент отображается только по нажатию ESC. То есть биндинг повесился на метод, а не на объект. Можете пояснить почему?

We recommend hosting TIMEWEB

Stable hosting, on which the social network EVILEG is located. For projects on Django we recommend VDS hosting.

Subscribe to the discussion2

Section subscription99

Do you like it? Share on social networks!

June 18, 2018, 4:06 a.m.

и как мне тогда через JS переинициализировать объект в том же виде?

June 18, 2018, 4:30 a.m.
The answer was marked as a solution.

Можно через states сделать.

    Text {
        id: label
        x: 24; y: 24
        // custom counter property for space presses
        property int spacePresses: 0
        text: "Space pressed: " + spacePresses + " times"
        // (1) handler for text changes
        onTextChanged: console.log("text changed to:", text)
        // need focus to receive key events
        focus: true
        // (2) handler with some JS
        Keys.onSpacePressed: {
        increment()
        }

        states: [
            State {
                name: "onEsc"
                PropertyChanges {
                    target: label
                    text: ""
                }
            },
            State {
                name: "onReleased"
                PropertyChanges {
                    target: label
                    text: "Space pressed: " + spacePresses + " times"
                }
            }
        ]

        // clear the text on escape
        Keys.onEscapePressed: {
            state = "onEsc"
        }

        Keys.onReleased: {
            state = "onReleased"
        }

        // (3) a JS function
        function increment() {
        spacePresses = spacePresses + 1
        }
    }

June 18, 2018, 4:31 a.m.

По идее, я так думаю, в раздел State{} можно прописать when, к которому привязать кнопки, но я не нашёл, как это правильно сделать.

June 18, 2018, 4:55 a.m.

Да тут главное принцип понятен. Спасибо. Я теперь понял почему во всех примерах применяют именно state - PropertyChanges .

June 18, 2018, 4:59 a.m.

Опять же, ни кто не мешает всё это проделывать непосредственно в JS в Keys.onReleased и Keys.onEscapePressed, но, на сколько я понимаю, чем меньше JS в QML коде, тем лучше. Меньше проблем при отладке большого кол-ва кода возникает. Да и Qt Creator легче ошибки отлавливает.

June 18, 2018, 6:51 a.m.

В том то и дело что просто в JS так нельзя

Если использовать state -

onReleased - не нужен

вот так все работает

   Text {
                id: label
                x: 24; y: 24
                // custom counter property for space presses
                property int spacePresses: 0
                text: "Space pressed: " + spacePresses + " times"
                // (1) handler for text changes
                onTextChanged: console.log("text changed to:", text)
                // need focus to receive key events
                focus: true
                // (2) handler with some JS
                Keys.onSpacePressed: {
                increment()
                }

                states: [
                    State {
                        name: "onEsc"
                        PropertyChanges {
                            target: label
                            text: "Space pressed: " + spacePresses + " times"
                        }
                    }
                ]

                // clear the text on escape
                Keys.onEscapePressed: {
                    state = "onEsc"
                }

                // (3) a JS function
                function increment() {
                spacePresses = spacePresses + 1
                }
            }

Я так понимаю что в этом случае биндинг не слетает

Comments

Only authorized users can post comments.
Please, Log in or Sign up