data binding

How-to Discussions
1

this is my JS file. data fetching from firebase realtime database

<JavaScript>
var Observable = require('FuseJS/Observable');
var moviesData = Observable();
function getMovies() {
console.log("Retriving moviesdata from firebase ....")
var messagesRef = firebase.database().ref("movies").orderByKey();
messagesRef.once("value").
then(function(snapshot){
  snapshot.forEach(function(childSnapshot){
    var childData = childSnapshot.val();
   // console.log(childData.title);
    moviesData.add(childData);
  });
  
});
}
module.exports = {
moviesData: moviesData
};
</JavaScript

In my Movie.ux File

  <Each Items="{moviesData}">
 <Text Value="{title}" TextAlignment="Center" TextColor="White"/>
</Each>

Retrieved data is not populating on ux file. I did console.log(childData.title) inside forEach and data is coming from firebase.
Wonder what I did wrong here?.

2

That all looks correct as far as I can see.
As this seems to be in separate .ux files - are you sure moviesData is actually accessible to Movie.ux?

3

Remi Pedersen wrote:

That all looks correct as far as I can see.
As this seems to be in separate .ux files - are you sure moviesData is actually accessible to Movie.ux?

Yes they are two separate files. One thing I encounter is that if I log moviesData outside getMovies() function. Even though I am using moviesData.add(childData) it prints null.

4

Even though I am using moviesData.add(childData) it prints null.

This is perfectly normal because the observable might be updated asynchronously and because something in UX has to subscribe to it in order for it to have a value. You can read more about this in the Observable documentation.

As for your issue I still suspect that moviesData is not accessible from your UX.
Instead of calling getMovies() (at all) you could try to just do moviesData.add({"title": "test"}); and see if that makes any difference.

If that still doesn’t work then please provide enough code to show the relationship between the different files. :slight_smile:

5

Yup, as you said moviesData is not accessible. I tried moviesData.add({“title”: “test”}); but there is no any data shown in .ux

Code is same as above. Java script file is in Data.js and I linked JS file on Movies.ux
completely different example

<Panel ux:Class="ActivityPage">
<Router ux:Dependency="router"/>
<!-- <JavaScript File="../JS/GetData.js" /> -->
<JavaScript>
var Observable = require('FuseJS/Observable');
var acData = Observable("");
acData.add({"title":"outside javascript function"});
function dta(){
	acData.add({"title":"inside javascript function"});
}
module.exports = {
	dta:dta,
	acData:acData
}
</JavaScript>
<ScrollView ClipToBounds="true">
		<StackPanel>
			<Text Value="Data" TextWrapping="Wrap" TextColor="Blue"/>
			<Each Items="{acData}">
				<Text Value="{title}" TextWrapping="Wrap" TextColor="Red" />
			</Each>
		</StackPanel>
	</ScrollView>

How to print the statement 'inside javascript function"?. I only can print outside javascript function

6

But the example you included in your last post works just as expected. “outside javascript function” is included in your observable list and displayed, as it should be.

Did you manage to fix it for your original example as well? If not the please share the relevant UX markup for that one as well.

How to print the statement 'inside javascript function"?. I only can print outside javascript function

You of course have to call the function in order to execute the code inside it. If you call dta from somewhere (either in your JS or by adding it as a clicked-handler in the UX) then it behaves just as expected.

7

Tom wrote:

this is my JS file. data fetching from firebase realtime database

<JavaScript>
var Observable = require('FuseJS/Observable');
var moviesData = Observable();
function getMovies() {
console.log("Retriving moviesdata from firebase ....")
var messagesRef = firebase.database().ref("movies").orderByKey();
messagesRef.once("value").
then(function(snapshot){
  snapshot.forEach(function(childSnapshot){
    var childData = childSnapshot.val();
   // console.log(childData.title);
    moviesData.add(childData);
  });
  
});
}
module.exports = {
moviesData: moviesData
};
</JavaScript

In my Movie.ux File

  <Each Items="{moviesData}">

Retrieved data is not populating on ux file. I did console.log(childData.title) inside forEach and data is coming from firebase.
Wonder what I did wrong here?.

Hi, Tom.
How to data fetching from firebase real-time database?
I keep looking how to communicate with firebase real-time database.
Would you please share your know-how for Fuse user.
Thanks.

8

Here’s the github repo of fuse firebase.

just edit firebase-config.js_example file with your own config.