我可以针对自定义项渲染器中的特定元素运行函数吗？

Question

我试图弄清楚我可以在我的自定义项目渲染器内的 RichEditableText 元素中获取数据并通过一个函数运行该数据，然后将该函数的结果显示在项目中所有项目的 RichEditableText 组件中渲染器...

我的项目渲染器如下所示：

<!--    *********************************************** -->     
<s:DataGroup id="myDataGroup" width="100%">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

    <s:itemRenderer>
        <fx:Component>
            <s:ItemRenderer width="100%">
                <s:HGroup width="100%">
                    <s:BitmapImage id="labelIMG" source="{data.user.profileimage}"/>
                    <s:VGroup width="100%">
                        <s:RichEditableText id="labelText" 
                                            width="100%"
                                            editable="false"
                                            fontSize="16"
                                            multiline="true"
                                            paddingRight="20"
                                            selectable="false"
                                            text="{data.text}"
                                            textJustify="distribute"
                                            verticalAlign="middle"
                                            lineHeight="14"
                                            letterSpacing="-5"/>
                        <s:Label id="labelDate" fontSize="9" 
                                 width="100%"                                                                                                                    
                                 textAlign="right"
                                 text="{data.date_created}" 
                                 paddingBottom="20" 
                                 paddingRight="20" />
                    </s:VGroup>
                </s:HGroup>
            </s:ItemRenderer>
        </fx:Component>
    </s:itemRenderer>
</s:DataGroup>
<!--    *********************************************** -->

所以对于我在项目渲染器中显示的日期项目（带有绑定数据 data.date_created 的标签日期），我想通过一个将日期转换为所需格式的函数来运行它......该函数在答案中找到here。

这可能吗？注意：我还从 JSON 生成我的 dataProvider 数据，并且必须首先将数据设为 ArrayCollection：

myJSONdata = JSON.parse(jsonContent.data);   //PARSE THE INCOMING JSON DATA
arrColl = new ArrayCollection(myJSONdata as Array);   // CONVERT IT TO AN ARRAYCOLLECTION
myDataGroup.dataProvider = arrColl;   // NOW ASSIGN IT AS THE DATAPROVIDER FOR DATAGROUP/ITEMRENDERER

是否可以在我转换为 ArrayCollection 时更改传入数据，以便在项目渲染器中使用的数据已经运行此日期函数并替换了日期元素？

如果两者都可能，那么是否有一种性能更好或通常被认为是最佳实践？

Answer 1

是的，这是可能的，而且不太难。简而言之，将函数添加到您的 itemRenderer 并在 dataChange() 事件侦听器或 set data 方法中调用它。

        <!-- add the data change listener here -->
        <s:ItemRenderer width="100%" dataChange="onDataChange()">

            <fx:Script><[[

              // add in your date format function
private function toRelativeDate(d:Date):String {
        var now:Date=new Date();
        var millisecs:int=now.valueOf()-d.valueOf(); //gives you the num. of milliseconds between d and now
        var secs:int=int(millisecs / 1000);
        if(secs < 60) {
            return secs + " seconds ago";
        }else if(secs < 60*60) {
            return Math.round(secs / 60) + " minutes ago";
        } else if(secs < 60*60*24) {
            return Math.round(secs / (60*60)) + " hours ago";
        } else {
            return Math.round(secs / (60*60*24)) + " days ago";
        }
    }

              // implement the data change listener here
              protected function onDataChange():void{
                  // make sure that the data exists; as sometimes this method will run during intiial component setup
                  if(data){ 
                   // if data does exist; cast it as a date pass it to your parsing function and set the result of that to the text field of your RichText control
                   labelText.text = toRelativeDate((new date(data.text)));
                  } else {
                     // if data doesn't exist; set the text of the RichText control to empty.
                    labelText.text = '';
                   }
              }

            ]]></fx:Script>

            <s:HGroup width="100%">
                <s:BitmapImage id="labelIMG" source="{data.user.profileimage}"/>
                <s:VGroup width="100%">
                    <s:RichEditableText id="labelText" 
                                        width="100%"
                                        editable="false"
                                        fontSize="16"
                                        multiline="true"
                                        paddingRight="20"
                                        selectable="false"
                                        <!-- do not set the text value using Binding -->
                                        textJustify="distribute"
                                        verticalAlign="middle"
                                        lineHeight="14"
                                        letterSpacing="-5"/>
                    <s:Label id="labelDate" fontSize="9" 
                             width="100%"                                                                                                                    
                             textAlign="right"
                             text="{data.date_created}" 
                             paddingBottom="20" 
                             paddingRight="20" />
                </s:VGroup>
            </s:HGroup>
        </s:ItemRenderer>

我在浏览器中编写了所有这些代码；所以它可能需要调整。作为基本规则;我建议使用 dataChange() 事件而不是绑定来设置 itemRenderer 内部的值。绑定可能会产生一些性能/内存泄漏副作用。