Can't access QML item by id inside SplitView

Question

I've began learning QML and I'm getting the following error:

ReferenceError: chatTextArea is not defined

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

For some reason I can't access via the ID of my TextArea, or any item inside of the SplitView. But I am able to 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 out of scope of my function? Thanks in advance.

Answer 1

Change the starting portion of your code to smth 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

Reason this works, is that Tab turns out to behave like a Loader (per the docs), loading whichever Component you give it; thus, the SplitView in your code is a Component specification, and that component is instantiated by the Tab in a separate QML context (parented to that of the document root item). Which is why everything inside that context can see things up the scope chain (like the appendMessage() function), but not the reverse :)