Observables, map and such

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">
		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
		<Text Value="{baz}"/>

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?

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.

Ok, that makes perfects sense, thanks!

no worries :slight_smile: