我可以针对自定义项呈示器中的特定元素运行函数吗?

时间:2013-04-06 18:26:01

标签: actionscript-3 flex flash-builder

我试图弄清楚我可以在我的自定义项目渲染器中的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>
<!--    *********************************************** -->

所以对于项目渲染器中显示的日期项目im(带有绑定数据data.date_created的labelDate)我想通过一个将日期转换为所需格式的函数运行它...函数在答案中找到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

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

如果可能的话,是否有更好的表现或通常被认为是最佳做法?

1 个答案:

答案 0 :(得分:1)

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

        <!-- 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内部的设置值。绑定可能会产生一些性能/内存泄漏的副作用。