Data binding and <Each>

How-to Discussions
1

RE: Forum post by Anders Lassen

Hey guys,

I’ve used the code snippet provided by Anders (above) in my app for a while now, with good results. But recently an update to Fuse started producing this warning:
Binding to an empty key, '{}', is deprecated due to ambiguity. Use the 'data()' expression instead.

To be honest, I really have no idea what the data() substitute is meant to be, but I understand the general gist of the ambiguity concern.

Now, the code still runs, but when the text cycles out (aka <RemovingAnimation>), it displays Fuse.Scripting.JavaScript.ObjectMirror instead of whatever text used to be held in the observable.

The relevant part of my .ux looks like this:

<Panel ux:Name="statusOutput" Visibility="Hidden" Height="25" Padding="0, 0, 0, 20" Alignment="Bottom" Opacity="1">
	<Each Items="{statusOutputText}">
		<Text ux:Name="text" Value="{}" Alignment="Center" Color="#ffffff" FontSize="15">
			<AddingAnimation>
				<Move Y="30" Duration="0.3" Easing="CubicIn" />
				<Change text.Opacity="0" Duration="0.2" />
			</AddingAnimation>
			<RemovingAnimation>
				<Move Y="-30" Duration="0.3" Easing="CubicOut" />
				<Change text.Opacity="0" Duration="0.2" />
			</RemovingAnimation>
		</Text>
	</Each>
	<WhileKeyboardVisible>
		<Change statusOutput.Opacity="0" />
	</WhileKeyboardVisible>
</Panel>

The .js is implemented along these lines:

var statusOutputText = Observable("");
function setStatusText(text) {
    statusOutputText.value = text;
}

module.exports = {
    statusOutputText: statusOutputText
}

Various events call the shorthand-method setStatusText('foo'); to set the status text.

I’m a complete novice in the Fuse ecosystem, and would be more than happy to refactor this implementation to anything else that makes more sense. It feels like a simple fix though, and hopefully someone can just spot a silly mistake somewhere :slight_smile:

Thanks heaps,
Dan

2

Hey Dan.

In version 1.7.0 Fuse introduced new data() function.

You have to change this line. Empty {} replace with {data()}.

<Text ux:Name="text" Value="{data()}" Alignment="Center" Color="#ffffff" FontSize="15">

Hope this helps.

3

Thanks Arturs, that seems to have fixed it! Legend :slight_smile:

4

PS: if any Fuse officials are reading this, it might be worthwhile to update some of the docs (for instance this) to reflect the above points. Just in case other strugglers like myself happen upon them :slight_smile: