Access Imported QML Component ID from Imported JS - import

Question

I'm trying to access an included QML id through an included JavaScript function. And I get the error:
Reference error: textItem is not defined.
main.qml
import QtQuick 2.1
import "functions.js" as Logic
Rectangle {
anchors.fill: parent;
Button { }
MouseArea {
onClicked: Logic.changeText()
}
}
Button.qml
import QtQuick 2.1
Rectangle {
width: 100; height: 30
color: "black"
Text {
id: textItem
anchors.centerIn: parent
font.pointSize: 20
color: "white"
text: "Hello!"
}
}
functions.js
function changeText() {
textItem.text = "Goodbye!";
}
Is there any way to access an Imported QML's id scope from an imported JS file?

Answer 1

As folibis said, textItem is not accessible to functions.js. There are more problems with your code, though. The button whose text you want to change has no ID, so you can't change its text even if you wanted to.
Give the button an ID, and then pass the button to changeText():
import QtQuick 2.1
import "functions.js" as Logic
Rectangle {
anchors.fill: parent;
Button {
id: button
}
MouseArea {
onClicked: Logic.changeText(button)
}
}
The next problem is that your Button type doesn't expose a text property. You should make an alias to the text property of textItem:
import QtQuick 2.1
Rectangle {
width: 100; height: 30
color: "black"
property alias text: textItem.text
Text {
id: textItem
anchors.centerIn: parent
font.pointSize: 20
color: "white"
text: "Hello!"
}
}
Then the rest will work:
function changeText(button) {
button.text = "Goodbye!";
}

Answer 2

In order to reference something from other files (or inside the QML file), you need to think in terms of the QML tree (navigating through the tree with id property). With that being said, I would suggest the following changes:
import QtQuick 2.1
import "functions.js" as Logic
Rectangle {
id: rootRec
anchors.fill: parent;
Button {id: myButton}
MouseArea {
onClicked: Logic.changeText(myButton)
}
}
In Button.qml:
import QtQuick 2.1
Rectangle {
id: rootRec
width: 100; height: 30
color: "black"
property string text: "Hello"
Text {
id: textItem
anchors.centerIn: parent
font.pointSize: 20
color: "white"
text: rootRec.text
}
}
In "function.js" you reference it like this:
function changeText(buttonId) {
buttonId.text = "Goodbye!"; }