unable to bind to property

動的なプロパティを持つ Object を集めた ArrayCollection Object を TileList に Bind し、itemRenderer で表示レイアウトをカスタマイズしようとすると、Debug の際に console 画面に下記の様なエラーが。

warning: unable to bind to property 'label' on class 'Object' (class is not an IEventDispatcher)
warning: unable to bind to property 'src' on class 'Object' (class is not an IEventDispatcher)
warning: unable to bind to property 'label' on class 'Object' (class is not an IEventDispatcher)
warning: unable to bind to property 'src' on class 'Object' (class is not an IEventDispatcher)
warning: unable to bind to property 'label' on class 'Object' (class is not an IEventDispatcher)
warning: unable to bind to property 'src' on class 'Object' (class is not an IEventDispatcher)
warning: unable to bind to property 'label' on class 'Object' (class is not an IEventDispatcher)
warning: unable to bind to property 'src' on class 'Object' (class is not an IEventDispatcher)
warning: unable to bind to property 'label' on class 'Object' (class is not an IEventDispatcher)
warning: unable to bind to property 'src' on class 'Object' (class is not an IEventDispatcher)
warning: unable to bind to property 'label' on class 'Object' (class is not an IEventDispatcher)
warning: unable to bind to property 'src' on class 'Object' (class is not an IEventDispatcher)

■ エラーが生じるサンプルソース

<?xml version="1.0" encoding="UTF-8"?>
<mx:Application
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	viewSourceURL="source/index.html"
	layout="absolute">	
	<mx:Script>
		<![CDATA[
			[Bindable]
				[Embed(source='asset/image01.jpg')]
				private var image01:Class;
			[Bindable]
				[Embed(source='asset/image02.jpg')]
				private var image02:Class;
			[Bindable]
				[Embed(source='asset/image03.jpg')]
				private var image03:Class;
			[Bindable]
				[Embed(source='asset/image04.jpg')]
				private var image04:Class;
			[Bindable]
				[Embed(source='asset/image05.jpg')]
				private var image05:Class;
			[Bindable]
				[Embed(source='asset/image06.jpg')]
				private var image06:Class;
		]]>
	</mx:Script>
	<mx:ArrayCollection id="sampe_ac">
		<mx:Object label="image01" src="{image01}" />
		<mx:Object label="image02" src="{image02}" />
		<mx:Object label="image03" src="{image03}" />
		<mx:Object label="image04" src="{image04}" />
		<mx:Object label="image05" src="{image05}" />
		<mx:Object label="image06" src="{image06}" />
	</mx:ArrayCollection>
	<mx:Component id="sample_renderer">
		<mx:VBox verticalAlign="middle" horizontalAlign="center">
			<mx:Label fontWeight="bold" text="{data.label}" />
			<mx:Image source="{data.src}" />
		</mx:VBox>
	</mx:Component>
	<mx:TileList 
		columnWidth="150" 
		rowHeight="150" 
		columnCount="3" 
		dataProvider="{sample_arr}" 
		itemRenderer="{sample_renderer}" />
</mx:Application>

ブラウザには表示はされるけど、嫌なエラーなので検索してみると、同様な記事が FXUG にありました。
記事

なにやら動的なプロパティを持つ Object は明示的に Bindable にしてあげないといけないらしい。なので、明示的に Object のプロパティを Bindable にする AS Class を作成し、Bindable な Array に各 Object を追加して、その Array を先程の ArrayCollection Object の代わりに TileList の dataProvider に Bind することでエラーが出なくなった。


■ Object のプロパティ を Bindable にする AS Class

package
{
	public class SetData
	{
		[Bindable]
			public var label:String;			
		[Bindable]
			public var src:Class;
		public function SetData(label:String, src:Class) {
			this.label = label;
			this.src   = src;
		}
	}
}

■ 最終的なソース

<?xml version="1.0" encoding="UTF-8"?>
<mx:Application
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	viewSourceURL="source/index.html"
	layout="absolute">	
	<mx:Script>
		<![CDATA[			
			[Bindable]
				[Embed(source='asset/image01.jpg')]
				private var image01:Class;
			[Bindable]
				[Embed(source='asset/image02.jpg')]
				private var image02:Class;
			[Bindable]
				[Embed(source='asset/image03.jpg')]
				private var image03:Class;
			[Bindable]
				[Embed(source='asset/image04.jpg')]
				private var image04:Class;
			[Bindable]
				[Embed(source='asset/image05.jpg')]
				private var image05:Class;
			[Bindable]
				[Embed(source='asset/image06.jpg')]
				private var image06:Class;
			[Bindable]
				private var sample_arr:Array = [
					new SetData("image01", image01),
					new SetData("image02", image02),
					new SetData("image03", image03),
					new SetData("image04", image04),
					new SetData("image05", image05),
					new SetData("image06", image06)
				]
		]]>
	</mx:Script>
	<mx:Component id="sample_renderer">
		<mx:VBox verticalAlign="middle" horizontalAlign="center">
			<mx:Label fontWeight="bold" text="{data.label}" />
			<mx:Image source="{data.src}" />
		</mx:VBox>
	</mx:Component>
	<mx:TileList 
		columnWidth="150" 
		rowHeight="150" 
		columnCount="3" 
		dataProvider="{sample_arr}" 
		itemRenderer="{sample_renderer}" />
</mx:Application>
ページの一番上へ移動

トラックバック

この記事へのトラックバック URL は下記の通りです。
http://www.convexstyle.net/mt/mt-tb.cgi/44

コメントの投稿

初めて投稿される方のコメントは管理者の承認が必要となります。ご了承ください。