javascript - 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? -

first off, i've ever coded in c , qml feels both coolest , damn frustrating language. also, having written c, not entirely fluent in qml terminology please bear me.

i have project main qml file has different states bring different "pages". "page" defined in separate qml file, instance of page created in main.qml , instance visible depending on state of main.qml. global variables can shared/updated between these pages because 1 page displays dependent on variables change in page (eg. button press). first page have multiple buttons different options, , second page display same formatting, information corresponds option selected. have been trying achieve using javascript library as discussed here , able maipulate , reference variable within individual files changes not seem transfer other files. suspect each file importing unique "instance" of library. how can make library function c header file in qml?

some simple sample code:

var.js

//var.js .pragma library var option = 1 

main.qml

//main.qml import qtquick 2.0 import "var.js" 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}         }     ] 

home_page.qml

//home_page.qml import qtquick 2.0 import qtquick.controls 1.0 import qtquick.controls.styles 1.0 import "var.js" 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... } 

option_page.qml

//option_page.qml import qtquick 2.0 import "var.js" var  rectangle {     id: option_page     objectname: "option_page"      ...      text {          ...          text: "option " + var.option       } } 

i tried singleton method mentioned in link above not work. have tried making js function in library manipulate variables, called qml, no avail.

if helps have having trouble js global variable within individual files. have been using third party qml object list of buttons , want global variable updated depending on button pressed. when display variable, via text object, not update on button press, if display original property being updated with, update.

i.e.

this not update global variable

text {      ...      text: "option " + var.button_pressed  }  thirdpartybuttonlist {     id:button_list      ...      onindexchanged:{         var.button_pressed = index     }  } 

but does

text {      ...      text: "option " + var.button_pressed + " " + button_list.index  }  thirdpartybuttonlist {     id: button_list      ...      onindexchanged:{         var.button_pressed = index     }  }