关于 AS3 中可绑定变量的问题

Question

我可能在这里误用了可绑定变量，所以在我尝试解释我要解释的内容时请耐心等待。

我有一个简单的火花列表，允许人们通过单击其中一项来选择背景。选择背景后，我将其保存到 SharedObject 以便用户稍后再次加载应用程序时使用它。

此列表由如下创建的 ArrayCollection（绑定变量）填充：

[Bindable] private var arrBG:ArrayCollection = new ArrayCollection();

然后通过以下方式填充：

var objImage:Object;
var strSharedObjImage:String = sharedObj.sharedBackground.data.backgroundIndex;
// Background
objImage = new Object();
objImage.icon = ICONS_PATH + objImage.label;
objImage.label = "Titanium";
objImage.selected = (strSharedObjImage == objImage.fileName) ? true : false;
arrBG.addItem(objImage);

objImage = new Object();
objImage.icon = ICONS_PATH + objImage.fileName;
objImage.label = "Iron";
objImage.selected = (strSharedObjImage == objImage.label) ? true : false;
arrBG.addItem(objImage);

然后我将它用作我的 spark 列表中的 dataProvider。

如果您在上面注意到，在我的对象上，我有一个名为 selected 的属性，如果我的共享对象的值与“标签”属性上的值相同，它将设置为 true。

在我的火花列表的项目渲染器上，我有以下内容：

<s:ItemRenderer name="HorizontalListSkin"
                xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                autoDrawBackground="false" 
                creationComplete="initMenuSkin(event)"
                >

    <fx:Script>
        <![CDATA[
        protected function initMenuSkin(event:Event):void
        {

            iconImage.source = data.icon;
            iconText.text = data.label;

            // Check to see if the item we're displying is selected. If it is make it stand out
            if(data.selected){
                iconText.setStyle("color", "Green")
            }
        }

        ]]>
    </fx:Script>

    <s:VGroup x="10" y="10" width="50" height="50" buttonMode="true" horizontalAlign="center">
        <s:Image id="iconImage" horizontalCenter="0"/>
        <s:Label id="iconText" fontFamily="Verdana" fontSize="11" fontWeight="bold" horizontalCenter="0" showTruncationTip="false"/>
    </s:VGroup> 

</s:ItemRenderer>

如您所见，我只是在更改所选项目的字体颜色。

当我加载它时，我可以看到我之前选择的项目被标记为绿色，如果我选择一个新项目，我希望它现在被标记为绿色。

显然这里有一个很大的差距，因为在我上面的解释中没有提到更新我的可绑定变量，所以理论上它会传播到我的火花列表（作为一个可绑定变量，我认为它会同时更新项目我的清单(?))。

好吧，我尝试了几种不同的方法，调试器确实“说”我的数组已经更新，但是，我的列表根本没有更新，只会带来另一个标记为绿色的项目如果我关闭屏幕并再次打开（当它全部重新加载时）

上面描述的创建新背景的整个逻辑都包含在一个函数中，所以每当我从背景列表中选择一个项目时，我都会再次触发我的“loadBackgrounds”方法，这将应用所有逻辑来知道哪个是选定的背景，并且因为该变量与我的火花列表绑定，我希望会更新列表。事实是，它没有。

我在这里做错了什么？我是不是完全疯了，有一种更简单的方法可以做到这一点，但只是我看不到？

如有任何帮助，我们将不胜感激。

提前致谢

Answer 1

设置数据后，您需要刷新集合。

arrBG.refresh();

[编辑]
好的，我重新阅读了您的问题。
我想我误解了你在问什么。
您想知道如何更新列表，以便项目渲染器在您对数据提供者进行更改后重新渲染新列表？

function newSelection( val:String ):void{
  for each( var item:Object in arrBG ){
    if( item.label == val ){
      item.selected = true;
    }else{
      item.selected = false;
    }
  }
  arrBG.refresh();
}

// 在渲染器上使用提交属性而不是 init
// 只要有数据提供者更新/更改，提交属性就会触发

<s:ItemRenderer name="HorizontalListSkin"
                xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                autoDrawBackground="false" 
                >

    <fx:Script>
        <![CDATA[
        override protected function commitProperties():void{
            super.commitProperties();
            iconImage.source = data.icon;
            iconText.text = data.label;

            // Check to see if the item we're displying is selected. If it is make it stand out
            if(data.selected){
                iconText.setStyle("color", "Green")
            }
        }

        ]]>
    </fx:Script>

    <s:VGroup x="10" y="10" width="50" height="50" buttonMode="true" horizontalAlign="center">
        <s:Image id="iconImage" horizontalCenter="0"/>
        <s:Label id="iconText" fontFamily="Verdana" fontSize="11" fontWeight="bold" horizontalCenter="0" showTruncationTip="false"/>
    </s:VGroup> 

</s:ItemRenderer>