Unable to access QML element by ID inside SplitView

Question

I started learning QML and I get the following error:

ReferenceError: chatTextArea not defined

I have a global function that does something on an element in the same QML file, by id.

For some reason, I cannot access through the ID of my TextArea or any element inside the SplitView. But I can manipulate the properties of TabView and each tab.

My broken code:

import QtQuick 2.2 import QtQuick.Controls 1.1 import QtQuick.Layouts 1.1 Rectangle { id: lobby function appendChatMsg(msg) { chatTextArea.append(msg) //causes: ReferenceError: chatTextArea is not defined } TabView { id: frame Tab { //I CAN access this item via ID. id: controlPage SplitView { anchors.fill: parent TableView { Layout.fillWidth: true } GridLayout { columns: 1 TextArea { //This item I CANNOT access via ID. id: chatTextArea Layout.fillHeight: true Layout.fillWidth: true } TextField { placeholderText: "Type something..." Layout.fillWidth: true } } } } } } 

Any idea why chatTextArea is beyond the scope of my function? Thanks in advance.

Answer 1

Change the start of your code like this:

 import QtQuick 2.2 import QtQuick.Controls 1.1 import QtQuick.Layouts 1.1 Rectangle { id: lobby function appendChatMsg(msg) { controlPage.chatArea.append(msg) //causes: ReferenceError: chatTextArea is not defined } TabView { id: frame Tab { //I CAN access this item via ID. id: controlPage property Item chatArea: item.chatArea SplitView { property Item chatArea: chatTextArea 

The reason this works is because Tab works as a loader (according to the docs), loading depending on which Component you give it to; Thus, SplitView in your code is a component specification, and this component is created by Tab in a separate QML context (with parent access to the document root element). That's why everything inside this context can see things in the chain of visibility (for example, the appendMessage() function), but not vice versa :)