Navigation within ItemRenderer

How can we navigate within an itemRenderer?

For example, in Views we use the View.navigator (ViewNavigator) to push and pop views, there is no such feature in ItemRenderer.

Navigation within a View (Easy)

<s:View>
<s:HGroup >
    <s:Button label="Questionnaire" click="navigator.pushView(view.QuestionnaireCategory1View)"/>
</s:HGroup>

Navigation within a Item Renderer (Impossible?)

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.c开发者_JS百科om/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                autoDrawBackground="true" height="56">
    <s:HGroup>
        <s:Button text="Button" click="?????????"/>
    </s:HGroup>


</s:ItemRenderer>

You want to use bubbling events to catch when the user interacts with an item renderer.

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark">
    <s:HGroup>
        <s:Button text="Button" click="dispatchEvent(new Event('buttonClicked', true));"/>
    </s:HGroup>
</s:ItemRenderer>

Then when do this with whatever is using your item renderer:

<DataGroup id="group" itemRenderer="YourItemRenderer" dataProvider="{someData}" creationComplete="group.addEventListener('buttonClick', someHandlerFunction);" />

And then within your handler function, do whatever action you wanted to do. In this case, I'm adding the event listener on creation complete of the DataGroup, but you can add it to the creation complete event of the main container. This way you keep your item renderer decoupled and reusable, as well as using proper software practices (data in, events out).

In when you create your itemRenderer

<comp:MyItemRenderer navigator="{navigator}"/>

In your itemRenderer (here call MyItemRenderer)

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                autoDrawBackground="true" height="56">
<fx:Script>
    <![CDATA[
        import spark.components.ViewNavigator;

        private var _navigator:ViewNavigator;

        public function set navigator(value:ViewNavigator):void
        {
            _navigator = value;
        }
    ]]>
</fx:Script>

<s:HGroup>
    <s:Button label="Button" click="{_navigator.pushView(view.QuestionnaireCategory1View)}"/>
</s:HGroup>