this has been asked many times before in similar ways, but i can’t find any satisfying answer to this.
why can’t i just create an associative array or an object in js and then simply access it on ux?
like
var foo = Observable();
foo.add({something:'something'});
foo.add({whatever:'whatever'});
foo.add({foo:'bar'});
and so on. then expose it to ux and then just access it like
<Text Value="{foo.whatever}">
if i do it the static way, everything is fine and works. if i generate arrays or objects with multiple dimensions in js, it seems that the ux-side just shoots itself in the head.
i know, i still can use each and use observable maps and so on, but it makes life so limited and complicated. i just wish i could access things directly.
i hope someone will figure out what i’m trying to say here. thanks in advance anyway.
You are kind of considering it one whole object then.
So what if you do:
foo.add({whatever: 'hi'});
foo.add({whatever: 'ok'});
what does food.whatever return??
If you do want to consider it one value than just do:
module.exports = {
foo: {
whatever: 'ok'
}
}
iUseFuse: The approach you are outlining should work fine.
If it doesn’t, can you please provide a full test case that demonstrates the problem?
Thanks
A full test, okay, here we go.
MainView.js
var Observable = require('FuseJS/Observable');
var x = Observable();
x.add({one:Observable('1')});
x.add({two:Observable('2')});
x.add({three:Observable('3')});
module.exports = {
x:x,
};
MainView.ux
<App Theme="Basic">
<JavaScript File="MainView.js" />
<Panel>
<Text Value="text" />
<Text Value="{x.two}" />
</Panel>
</App>
Will give you those two fighting kids with the message “Data binding to ‘two’: expected single value got array of length 3”
sorry for pushing this, but is it a bug or is it me doing something wrong?
You are doing something wrong. 
You are accessing the two value of the hash value that is X, but you initialize the observable as an array. The ux expects this:
x = Observable({
one: Observable('1'),
two: Observable('2'),
three: Observable('3')
});
(Which should work as you expect)
But what you do is similar to this:
x = [{one:'1'},{two:'2'},{three:'3'}];
And arrays are not accessible through databinding like you do, but through <Each>
Thanks a lot for answering.
But i leads me straight back to the initial question.
Let’s say i make a fetch from an api that gives me like 100 different key - value pairs.
How do i get them into x = Observable() in a way that i can access them directly in a UXFile without having to use Each or something like that?
I give you an example.
Let’s say we got 100 temperatures.
Like
tokio:25.5, istanbul:28.9, moscow:20.1, ...
Now i want to create an app that shows all those temperatures in a list, which i can easily do with Each. Done.
But above that list, i want to show the three highest temperatures in that list.
So of course i can do it the static way, like
x = Observable({
first: Observable({'name':'istanbul','temperature':'28.9'}),
second: Observable({'name':'tokio','temperature':'25.5'}),
and so on ...
But that’s a bad way to do it.
The good way would be to have a sorted list of all 100 temperatures, pass that list over to UX and then say something like
<Grid ...>
<Button Text="{x[1].name}" />
<Text Value="{x[1].temperature}" />
<BiggerText Value="{x[2].name}" />
<BiggerText Value="{x[2].temperature}" />
<SmallerText Value="{x[3].name}" />
<SmallerText Value="{x[3].temperature}" />
<Each Items={x}>
...
</Each>
</Grid>
But i really do struggle finding a way to create a dynamic list in JS, that is directly accessible in UX like that.
So to cut a long story short:
Do i understand your answer correctly when you say “arrays are not accessible through databinding like you do”
that what i’m trying to achieve here isn’t possible to do at all?
Am i bound to the static way?
I’m still unsure about how you get the data. Are they updated? Unless they are you don’t need to wrap Observables in Observables.
You can try something like this:
var x = Observable();
x.add({'name':'istanbul','temperature':'28.9'});
x.add({'name':'tokio','temperature':'25.5'});
And then:
<StackPanel>
<Each Items="{x}">
<Text Value="{name}" />
<Text Value="{temperature}" />
</Each>
</StackPanel>
Well, as i said, Each is not an option in my case.
So, last try to solve this. You have an object like this:
var n = new Object();
n.one = 1;
n.two = 2;
n.three = 3;
How is it possible to make it become this, wile the app is running:
var x = Observable({
one:1,
two:2,
three:3
});
That’s the main problem i try to solve here, how to dynamically add elements to an Observable variable.
Of course, i could just pass the n object to ux and use it the way i want, but that’s not the point. And of course i could have started with an Observable in the first place, but that’s not the point either.
The point is, how do i dynamically add data to an Observable if that is even possible?
But i guess it’s not possible, otherwise someone would have already told me.
What do you mean by dynamically adding data, if you don’t mean adding elements to the observable list?
Sounds like you want the Observable to contain one object, and add fields to that object and have that update the UI. This is not possible.
However, if you now beforehand what your fields will be called, you can make empty observables and update those:
var v = { one: Observable(), two: Observable(), three: Observable() };
v.one.value = 1;
v.two.value = 2;
v.three.value = 3;
That means i will never be able to fetch some complex data structure from somewhere and then say - give me the 24th element (whatever it’s called) out of it on UX side. I will always have to know what this element exactly is called and how it exactly looks like and then turn it into a single variable on JS side so i can hand it over to the UX side and access it there directly. Or i will have to go through that data structure in a loop and maybe even use map functions and more loops every single time and if i reach the needed element, then hand it over to UX - which is not efficient at all. That leads to inflexibility, tons of unneeded variables and completely unneeded complexity. sorry, but even a webview with JS and HTML inside would do better than that. This can’t be your last word, and i hope it will be changed between 0.11 and 1.0. Fuse started very promising - so please don’t let it become Barbies Playground, please make it become LEGO technic.
iUseFuse: I totally understand what you mean in your last post, but I don’t see how your earlier posts relate to this at all. Reviewing your earlier posts, I am very confused.
If you just want to download a big data structure and expose it in the UI, all you need to do is:
someObservable.value = { .. huge object .. }
And then data-bind accordingly to {someObservable.foo.bar.something}
The lack of array-lookups in our data binding syntax is a known limitation that we will address.
Another thing that will help a lot in complex data transforms is Angular 2.0 integration with Fuse which is in the works. Angular allows you to write complex expressions as part of your databindings, to reach into complex objects.
I am very exicited about angular2 and fuse integration. Anders can be tell us when will we be able to use angular2 with fuse. Are also working for npm support?
zafar.ansari@live.com: Yes, we are working on making it easier to work with NPM.
We also have basic Angular 2 support working in a closed beta with a few users. Can’t promise a release date yet though!
NPM/Angular2 support and a set of readymade components like ionic2 will make Fuse next big thing in mobile app development. I am working on an ionic2 app but I am want to use Angular2 with Fuse for my current project. Can I join closed beta group?
zafar.ansari@live.com You can join #ngux on Slack and get updates there.
