如何确保 Flex dataProvider 同步处理数据？

Question

我正在使用一个组件，并且当前有一个 dataProvider 正在工作，它是一个 ArrayCollection（有一个关于如何使其成为 XML 文件的单独问题......但我离题了）。

变量声明如下所示：

[Bindable]
private var _dpImageList : ArrayCollection = new ArrayCollection([
    {"location" : "path/to/image1.jpg"},
    {"location" : "path/to/image2.jpg"},
    {"location" : "path/to/image3.jpg"}
]);

然后我这样引用：

<s:List
    id="lstImages"
    width="100%"
    dataProvider="{_dpImageList}"
    itemRenderer="path.to.render.ImageRenderer"
    skinClass="path.to.skins.ListSkin"
    >
    <s:layout>
        <s:HorizontalLayout gap="2" />
    </s:layout>
</s:List>

目前，似乎每个项目都是异步处理的。

但是，我希望它们能够同步处理。

原因：我正在显示图像列表，并且我希望首先渲染最左侧的图像，然后是右侧的图像，依此类推。

---

编辑：

我刚刚找到了这个答案。
您认为这可能是同一个问题吗？

Answer 1

不要声明变量并将其用作绑定源，而是声明两个集合。 然后，onCreationComplete 调用 loadNext()，它将对象从第二个数组移出并将其推入第一个数组。 当项目已渲染（由 itemRenderer 调度并捕获的自定义事件）时，再次调用 loadNext() ，直到源数组为空并且绑定的 dataProvider 拥有所有图像。

如果这没有任何意义，我可以用代码编写它。 ;)

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768" creationComplete="init()">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            private var _source : ArrayCollection = new ArrayCollection([
                {"location" : "path/to/image1.jpg"},
                {"location" : "path/to/image2.jpg"},
                {"location" : "path/to/image3.jpg"}
            ]);         

            [Bindable] private var dataProvider:ArrayCollection;

            protected function init():void
            {
                this.lstImages.addEventListener( "imageLoaded", handleImageLoaded);
                loadImage()
            }

            protected function loadImage():void
            {
                if(this._source.length<=0)
                    return;
                var image:Object = this._source.getItemAt(0);
                dataProvider.addItem(image);
                this._source.removeItemAt(0);
            }

            protected function handleImageLoaded(event:Event):void
            {
                loadImage()
            }
        ]]>
    </fx:Script>
    <s:List
        id="lstImages"
        width="100%"
        dataProvider="{_dpImageList}"
        itemRenderer="path.to.render.ImageRenderer"
        skinClass="path.to.skins.ListSkin"
        >
        <s:layout>
            <s:HorizontalLayout gap="2" />
        </s:layout>
    </s:List>
</s:Application>

您的项目渲染器图像的完整句柄将调度：

protected function handleImageLoaded(event:Event):void
{
    owner.dispatch(new Event("imageLoaded"));
}

这应该以干净的顺序加载您的图像。