Binding with {} vs binding mxml (ConstantBinding)

[mjesteve]

I am experimenting with Binding, specifically I am trying to bind the “dataProvider” property, of a Jewel List control, with a “dataProv” property, of the mxml view; my goal is that when I update the dataProv property the dataProvider property of the list is updated.

Binding with “{}” works perfectly, but binding through “ConstantBinding” works when the bead is initialized (set strand) but never updates the list's dataProvider again.

We can observe this behavior in the “TabBarPlayGround” view of the TDJ with the first two TabBars:

1º)
<j:TabBar width="100%" className="tabBarVerticalIconItemRenderer" dataProvider="{tabBarData}">

2º)

<j:TabBar localId="tabbar2" selectedIndex="2" className="tabBarHorizontalIconItemRenderer">
	<j:beads>
		<js:ConstantBinding sourcePropertyName="tabBarData" destinationPropertyName="dataProvider"/>
	</j:beads>
</j:TabBar>

private var _tabBarData:ArrayList = new ArrayList([
				new TabBarButtonVO("Tab 1", "tab1", MaterialIconType.ACCESSIBILITY),
				new TabBarButtonVO("Tab 2", "tab2", MaterialIconType.ACCESS_ALARMS),
				new TabBarButtonVO("Tab 3", "tab3", MaterialIconType.WALLPAPER),
				new TabBarButtonVO("Tab 4", "tab4", MaterialIconType.NATURE)
			]);

[Bindable]
public function get tabBarData():ArrayList
{
	return _tabBarData;
}
public function set tabBarData(value:ArrayList):void
{
	_tabBarData = value;
}
private function updateTabBarData():void
{
	tabBarData = new ArrayList([
		new TabBarButtonVO("Other Tab 1", "tab1", MaterialIconType.MORE),
		new TabBarButtonVO("Other Tab 2", "tab2", MaterialIconType.PAGES),
		new TabBarButtonVO("Other Tab 3", "tab3", MaterialIconType.ZOOM_IN)
		]);
}

When tabBarData is updated, updateTabBarData(), changes are reflected in the first TabBar but not in the second.
Is this performance as expected? Should another bead be used?

Thx

[aharui]

Royale should have several binding classes, optimized for certain conditions. ConstantBinding is for binding to a constant value that does not change after initialization.

…

-Alex From: Hiedra ***@***.***> Reply-To: apache/royale-asjs ***@***.***> Date: Sunday, May 12, 2024 at 1:26 PM To: apache/royale-asjs ***@***.***> Cc: Subscribed ***@***.***> Subject: [apache/royale-asjs] Binding with {} vs binding mxml (ConstantBinding) (Issue #1244) EXTERNAL: Use caution when clicking on links or opening attachments. I am experimenting with Binding, specifically I am trying to bind the “dataProvider” property, of a Jewel List control, with a “dataProv” property, of the mxml view; my goal is that when I update the dataProv property the dataProvider property of the list is updated. Binding with “{}” works perfectly, but binding through “ConstantBinding” works when the bead is initialized (set strand) but never updates the list's dataProvider again. We can observe this behavior in the “TabBarPlayGround<https://github.com/apache/royale-asjs/blob/develop/examples/jewel/TourDeJewel/src/main/royale/TabBarPlayGround.mxml>” view of the TDJ with the first two TabBars: 1º) <j:TabBar width="100%" className="tabBarVerticalIconItemRenderer" dataProvider="{tabBarData}"> 2º) <j:TabBar localId="tabbar2" selectedIndex="2" className="tabBarHorizontalIconItemRenderer"> <j:beads> <js:ConstantBinding sourcePropertyName="tabBarData" destinationPropertyName="dataProvider"/> </j:beads> </j:TabBar> private var _tabBarData:ArrayList = new ArrayList([ new TabBarButtonVO("Tab 1", "tab1", MaterialIconType.ACCESSIBILITY), new TabBarButtonVO("Tab 2", "tab2", MaterialIconType.ACCESS_ALARMS), new TabBarButtonVO("Tab 3", "tab3", MaterialIconType.WALLPAPER), new TabBarButtonVO("Tab 4", "tab4", MaterialIconType.NATURE) ]); [Bindable] public function get tabBarData():ArrayList { return _tabBarData; } public function set tabBarData(value:ArrayList):void { _tabBarData = value; } private function updateTabBarData():void { tabBarData = new ArrayList([ new TabBarButtonVO("Other Tab 1", "tab1", MaterialIconType.MORE), new TabBarButtonVO("Other Tab 2", "tab2", MaterialIconType.PAGES), new TabBarButtonVO("Other Tab 3", "tab3", MaterialIconType.ZOOM_IN) ]); } When tabBarData is updated, updateTabBarData(), changes are reflected in the first TabBar but not in the second. Is this performance as expected? Should another bead be used? Thx — Reply to this email directly, view it on GitHub<#1244>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AAQIK6INFAQWM6N5B4GQINDZB7F5BAVCNFSM6AAAAABHTCQQNKVHI2DSMVQWIX3LMV43ASLTON2WKOZSGI4TCNBYHA2DKNY>. You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[mjesteve]

The name "gives us a clue", that's what it is, but since it's the only bead I've seen used in the examples, I thought I should use this one.
I identified 2 beads that I could use, according to basic-manifest.xml, "ConstantBinding" and "SimpleBinding" but the latter didn't work for me either.
I continue investigating.

Thx.

[Harbs]

Try ContainerDataBinding. That should work with nested objects.

ContainerDataBinding is my go-to binding class...

[mjesteve]

I'll try it, thanks.
@Harbs, don't you have problems with "infinite bindings" when using ContainerDataBinding? #847

[Harbs]

I don't think I ever came across that issue, nor did I remember that it existed.