Observables, map and such

[Eivind_Samuelsen]

So I’m playing around a bit with Observables, and I came over some strange behavior, here’s a small example:

<Page ux:Class="TestPage">
	<JavaScript>
		var Observable = require("FuseJS/Observable");
		var foo = Observable({ bar: { baz: "baz" } });
		var bar = foo.map(function(x) { return x.bar; });
		module.exports.baz = bar.map(function(x) { return x.baz; });

		foo.value.bar.baz = "meow";
		//bar.value.baz = "woof"; // TypeError: Cannot set property 'baz' of undefined. Also cats > dogs
	</JavaScript>
	<StackPanel>
		<Text Value="{baz}"/>
	</StackPanel>
</Page>

What I don’t understand is why does the commented statement fail? The way I understand this the variable bar is supposed to be mapped to an observable of foo.value.bar, yet bar.value is undefined?

[Jake_Taylor]

Observables will push values asynchronously, so I think what’s happening here is foo has not propagated its value to bar before bar's value is attempted to be read.

[Eivind_Samuelsen]

Ok, that makes perfects sense, thanks!

[Jake_Taylor]

no worries