如何在List中使用多个项目渲染器？

Question

我决定为社交网络制作一个简单的工具。 有一个列表（在图片中），它有一个复杂的itemRenderer，其中包含两个itemRenderer（IR）。

第一个（社交网络）从全局dataProvider获取数据，第二个（资源）根据所选第一个IR中的社交网络形成。第二个IR的dataProvider是在另一个dataProvider的基础上直接在IR代码中创建的。

protected function soc_itemClickHandler(event:ItemClickEvent):void
            {
                if (event.label == 'selected') {
                    dp = new ArrayCollection();//dataprovider of the second IR
                    for (var k:int = 0; k < Copypaste.socials.length; k++) 
                    {
                        for (var j:int = 0; j < Copypaste.resources.length; j++) 
                        {
                            var socObj:Object = Copypaste.socials.getItemAt(k);
                            var resObj:Object = Copypaste.resources.getItemAt(j);
                            if (socObj.selected == true ||socObj.selected == 'true') {
                                if (resObj.social == socObj.uid) {
                                    dp.addItem(resObj);
                                }
                            }
                        }
                    }
                }
            }

一切都很好，但是当我想选择另一个社交网络时问题就开始了 - 一个IR影响另一个，数据不匹配。并且可以通过拖动项目对列表进行排序，然后第二个IR中的所有数据都会消失，并且第一个IR中的复选框将被分解。

如何构建此应用的架构？