Observable problem.

How-to Discussions
1 
	var Observable=require("FuseJS/Observable");
	fruits = Observable(
	    { name: "Apple" , color: "red"    },
	    { name: "Lemon" , color: "yellow" },
	    { name: "Pear"  , color: "green"  },
	    { name: "Banana", color: "yellow" });

	goodFruits = fruits.where({color: "yellow"});

	goodFruits = fruits.where(function(e){ 
	    return e.color === "yellow";
	});
	console.log(""+goodFruits.name);

This code result in ‘undefined’
why??
how can i get the value “yellow” from the goodFruits?

2

As mentioned in the Fuse

A really important thing to understand about Observables is that they need at least one subscriber before they start propagating data.

You can read the docs for more detail information.

3

I tried databinding to ux attribute. But it still not work.
console results in goodFruits:(observable).
There is nothing to put in the goodFruits.

<App>
<JavaScript>

	var Observable=require("FuseJS/Observable");
	var fruits = Observable(
	    { name: "Apple" , color: "red"    },
	    { name: "Lemon" , color: "yellow" },
	    { name: "Pear"  , color: "green"  },
	    { name: "Banana", color: "yellow" });

	var goodFruits = fruits.where(function(e){ 
	    return e.color === "yellow";
	}); 

	console.log("goodFruits:"+goodFruits); 

	module.exports={ goodFruits: goodFruits, fruits: fruits}


</JavaScript>
   <!--class-->
<Button ux:Class="myBtn">
</Button>
<!--  -->
<!-- EdgeNavigator-->
<EdgeNavigator>
	<!-- MainView  -->
	<Button Height="10%" Text="Show Edge">
		<Clicked>
			<NavigateToggle Target="sidebar" />
		</Clicked>
	</Button>
	<Text Value="goodFruits:{goodFruits}"/>
	<!-- MainView  -->
	<!-- Edge -->
	<Grid Width="100%" ux:Name="sidebar" Background="#fff" Edge="Left">
		
		<Shadow ux:Name="shadow" Angle="180" Distance="8" Size="16" Color="#0000" />
		<ActivatingAnimation>
			<Change shadow.Color="#0004" />
		</ActivatingAnimation>
		<Each Items="{fruits}">
			<Text Value="name:{name}"/>
			<Text Value="color:{color}"/>
		</Each>
	</Grid>
	<!-- Edge -->
</EdgeNavigator>
<!-- EdgeNavigator-->
</App>
4

Hi ,

it’s extremely confusing looking at what you’re trying to do. Let’s break it apart.

One:

var goodFruits = fruits.where(function(e){ 
    return e.color === "yellow";
});
console.log("goodFruits:"+goodFruits);

You can not to that. goodFruits is the resulting observable of a reactive operation, meaning that you can not access it in imperative style, like you do with the console.log(). The variable simply is not populated there yet.

Next, you data-bind to it like so:

<Text Value="goodFruits:{goodFruits}"/>

how does that even make sense? goodFruits is expected to be a list of objects, so you would use it with an Each.

And finally, if you have so many questions about working with Observables, would you mind to first spend some time reading the Observable docs?

5

As @Uldis explained above, bind the goodFruits into <Each >, then you can use Observable API toArray() to print the values of observable.

And since Fusetools uses V8 Javascript engine, it cannot prints array or object, so you need JSON.stringify() function to print your variable value.

Hope it helps.

<App>
	<JavaScript>
		var Observable=require("FuseJS/Observable");
	    var fruits = Observable(
	        { name: "Apple" , color: "red"    },
	        { name: "Lemon" , color: "yellow" },
	        { name: "Pear"  , color: "green"  },
	        { name: "Banana", color: "yellow" });

	    var goodFruits = fruits.where({color: "yellow"});

	    goodFruits.onValueChanged(module, function(item) {
			//do something
	    	console.log(JSON.stringify(goodFruits.toArray()));  
		});
	    
	    module.exports = {
	    	goodFruits: goodFruits, 
	    	fruits: fruits
	    };
	</JavaScript>
	<StackPanel>
		<Each Items="{goodFruits}">
			<Text Value="{name}" />	
		</Each>
	</StackPanel>
</App>
6

Right. Except you should not use .onValueChanged on a list Observable, since it will only fire when the first element on that list changes.