Access QML properties from JavaScript

[simonbolek]

hi:)

i have a Harmattan project with:
main.qml - containing PageStackWindow containing several pages, InitialPage.qml, ... and Storage.js file
@
import QtQuick 1.0
import com.nokia.meego 1.0
import "Storage.js" as Storage

PageStackWindow {
id: appWindow

InitialPage {
    id: initialPage;
}

@

InitialPage.qml - wants to call a function from Storage.js like this

@
...
Component.onCompleted: {
newTripButton.visible = checkStartTrip()===0?true:false;
}
...
@

where checkStartTrip is a JS function.

However Runtime says:

ReferenceError: Can't find variable: checkStartTrip

If i code it like this:
@newTripButton.visible = Storage.checkStartTrip()===0?true:false;@

it does not work either. Storage is obviously not accessible from InitialPage.qml file, although InitialPage.qml is declared in main.qml

So, i have read in google (cannot find the thread anymore), that if i import JS file once in the main.qml, i would be able to access the QML properties from this JS file, and in fact from all those QML files, where a particular JS function is called.
I do not want to import JS file in every QML file, because the other QML files' properties will not be visible.

So any hints why I would get this error. Unless my assumption, that I would work like this, is wrong.

cheers
simon:)

[simonbolek]

BTW, i found the thread with the statement, that it sould work:
"Troubles setting js global variables from QML file":http://www.developer.nokia.com/Community/Discussion/showthread.php?223175-Troubles-setting-js-global-variables-from-QML-file

[favoritas37]

At each qml file you want to use functions from a JavaScript file then you need to import it to each file. There are a couple of things you could try if this doesn't fits you.

1. create functions in the qml file that will wrap the functions from the Javascript file. Thus you will import the JS file only once and you only need to make that QML item accessible to others for the to call any function needed.

2. Targeting your example: Move the code that needs the JS functions from the definition of the item in InitialPage.qml file to the instantiation of the item in main.qml. This will lead you to the following which will work:

@
import QtQuick 1.0
import com.nokia.meego 1.0
import "Storage.js" as Storage

PageStackWindow {
    id: appWindow
 
    InitialPage {
        id: initialPage;

        Component.onCompleted: {
               newTripButton.visible = Storage.checkStartTrip()===0?true:false;
        }
    }

@

In any case, in my opinion the correct way of handling such cases it to import the JS files in each QML that needs those functions and minimize the interconnections between the qml files.

[simonbolek]

Thanks, yes importing JS file in every Qml file would mean initialising this JS file every time Qml is instantiated. If that would be the only option, it makes it impossible to access properties of different QML files from one JF function. I can understand this, there might be a problem with same property names in several different files, but you cann still access them via id of the different QMl files, which have to be different.
@
...
firstPageId.foo
secondPageId.foo
...
@

So I still have hope, it is possible to import JS only once and access Qml properties of all QMLs from one function :-)

Another option is .pragma library which would NOT access ANY Qml properties.

cheers
simon