关于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 的属性，如果我的共享对象的值与“label”属性上的值相同，该属性将设置为 true。

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

<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>