Unable to access QML variable / id globally

Question

I have QtQuick 1.0
I use the following code:

Rectangle {   
    Component {   
        id: appDelegate
        MouseArea{
            id:myMouseArea
            hoverEnabled: true
            onClicked:{
               onClicked: load.source = page;                    
            }
        }
        Loader { 
            id: load
        }
    }
    GridView {
        id: view

        // I am unable to access myMouseArea here.
        highlight: myMouseArea.containsMouse ? appHighlight : !appHighlight  
        delegate: appDelegate
    }
}   

It gives me the following error:

ReferenceError: Can't find variable: myMouseArea /usr/lib/i386-linux-gnu/qt4/bin/qmlviewer exited with code 0

I don't know if the details I provided are sufficient, please let me know if theres anything else I am missing.

I am using this code as an example:
http://docs.knobbits.org/qt4/declarative-modelviews-gridview-qml-gridview-example-gridview-example-qml.html

Answer 1

You cannot access myMouseArea because it's created inside delegate context. You cannot access delegate other then currentItem. But you can freely access view inside the context of delegate, to set currentIndex to attached property index.

This is a corrected code:

Rectangle {
    width: 360
    height: 360

    Component { // It must be a component, if we want use it as delegate
        id: appDelegate

        // its not possible to have more than one element inside component
        Rectangle  
        {
            // need to set size of item, anchors wont work here
            // could use view.cellWidth and view.cellHeight to keep it DRY
            width: 96
            height: 66

            color: "green" // color only to see the place of MouseArea

            MouseArea {
                id:myMouseArea
                anchors.fill: parent // this setup the size to whole rectangle
                // it this item have the size 0,0 it will simple do not work
                hoverEnabled: true

                onEntered: {
                    // we know the mouse is inside this region
                    // setting this value will show the highlight rectangle
                    view.currentIndex = index;
                }

                onClicked:{
                   onClicked: load.source = page;
                }

            }
            Loader {
                // this is not needed but it's wise to not keep zero size
                anchors.fill: parent 
                id: load
            }
        }
    }
    GridView {
        id: view

        // the size of GridView must be set,
        //   as otherwise no delegate will not show  
        anchors.fill:  parent
        anchors.margins: 5

        cellWidth: 100
        cellHeight: 70

        // Rectangle will act as a border.
        //  Size and position is set by GridView 
        //  to the size and position of currentItem.
        // This is no a item, this makes a Component
        //   as highlight property needs one.
        // You can create a Component like appDelegate.
        highlight : Rectangle {
            border.width: 2
            border.color: "blue"
        }

        // some ListModel to setup the page variable inside delegate context
        model: ListModel {
             ListElement { page: "test1.qml"; }
             ListElement { page: "test2.qml"; }
             ListElement { page: "test3.qml"; }
         }

        delegate: appDelegate
    }
}