Qml: Trying JS global "header" file that can be accessed/updated by each qml file in qt project but each file creates its own instance of JS library? <p>First off, I've only ever really coded in C and Qml feels like both the coolest and most damn frustrating language. Also, having only written C, I am not entirely fluent in the Qml terminology so please bear with me.</p> <p>I have a project where a main qml file has different states which bring up different "pages". So a "page" is defined in a separate Qml file, an instance of that page is created in main.qml and that instance will be visible depending on the state of main.qml. I would like global variables that can be shared/updated between these pages because what one page displays will be dependent on variables that change in another page (eg. button press). The first page would have multiple buttons for different options, and the second page would display the same formatting, but with the information that corresponds to the option selected. I have been trying to achieve this by using a JavaScript library <a href="http://stackoverflow.com/questions/15257946/declare-global-property-in-qml-for-other-qml-files">as discussed here</a> and I am generally able to maipulate and reference the variable within the individual files but the changes do not seem to transfer to the other files. I suspect each file is importing a unique "instance" of the library. How can I make this library function like a C header file in Qml?</p> <p>Some simple sample code:</p> <p>Var.js</p> <pre><code>//Var.js .pragma library var option = 1 </code></pre> <p>main.qml</p> <pre><code>//main.qml import QtQuick 2.0 import "Var.js" as Var Rectangle { id: page state: "HOME_PAGE" ... Home_page{ id: home_page objectName: "home_page" visible: true ... } Option_page{ id: option_page objectName: "option_page" visible: false ... } states: [ State { name: "HOME_PAGE" PropertyChanges { target: home_page; visible: true} PropertyChanges { target: option_page; visible: false} }, State { name: "OPTION_PAGE" PropertyChanges { target: home_page; visible: false} PropertyChanges { target: option_page; visible: true} } ] </code></pre> <p>home_page.qml</p> <pre><code>//home_page.qml import QtQuick 2.0 import QtQuick.Controls 1.0 import QtQuick.Controls.Styles 1.0 import "Var.js" as Var Rectangle { id: home_page objectName: "home_page" ... Button { id: option1_button ... onClicked: { Var.option = 1 page.state = "OPTION_PAGE" } } Button { id: option2_button ... onClicked: { Var.option = 2 page.state = "OPTION_PAGE" } } etc... } </code></pre> <p>option_page.qml</p> <pre><code>//option_page.qml import QtQuick 2.0 import "Var.js" as Var Rectangle { id: option_page objectName: "option_page" ... Text { ... text: "Option " + Var.option } } </code></pre> <p>I tried the singleton method mentioned in the link above but could not get it to work. I have also tried making a JS function in the library to manipulate the variables, which is then called from Qml, but to no avail.</p> <p>If it helps I have also be having trouble with the JS global variable from within the individual files. I have been using a third party qml object for a list of buttons and I want a global variable updated depending on which button is pressed. When I display the variable, via text object, it does not update on button press, but if I also display it with the original property is was being updated with, then it does update. </p> <p>i.e.</p> <p>This does not update the global variable</p> <pre><code>Text { ... text: "Option " + Var.button_pressed } ThirdPartyButtonList { id:button_list ... onIndexChanged:{ Var.button_pressed = index } } </code></pre> <p>but this does</p> <pre><code>Text { ... text: "Option " + Var.button_pressed + " " + button_list.index } ThirdPartyButtonList { id: button_list ... onIndexChanged:{ Var.button_pressed = index } } </code></pre>