ItemRenderer中的导航

Question

我们如何在itemRenderer中导航？

例如，在视图中，我们使用View.navigator (ViewNavigator)推送和弹出视图，ItemRenderer中没有这样的特性。

视图中的导航(轻松)

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

项目渲染器中的导航(不可能？)

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/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>

Answer 1

当用户与项目呈现程序交互时，您希望使用冒泡事件来捕获。

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

那么，当您使用项目呈现器时，请执行以下操作：

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

然后在您的处理程序函数中，执行您想做的任何操作。在本例中，我将在DataGroup的创建完成时添加事件侦听器，但您可以将其添加到主容器的创建完整事件中。这样，您就可以保持项目呈现器的解耦和可重用，以及使用适当的软件实践(数据输入、事件输出)。

Answer 2

当您创建itemRenderer时

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

在您的itemRenderer中(这里调用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>

​