Simple Observable Collection Binding

How-to Discussions
1

Maybe it is late at night (where I am) but cannot get this to work.

//js

var Observable = require("FuseJS/Observable");
datas = new Observable(["1", "2"]);
exports.datas = datas;

//ux

 <Each Items="{datas}">
        <StackPanel>
            <Text Value="{}" />
        </StackPanel>
     </Each>

All this seems to print is one row with Fuse.Scripting.ArrayMirror. I would have thought I see 2 items rendered with the 2 values in the array.

What obvious thing am I missing?

2

I would have thought I see 2 items rendered with the 2 values in the array.

Firstly: the observable only has one value and that is the array you gave it. (The fact that the array contains 2 elements isn’t something it knows about). :slight_smile:

If you instead did: datas = new Observable("1", "2"); then datas would be an observable list with 2 values.

And secondly: Text.Value expects exactly one value so it won’t render all the contents in the observable list. If you want all the strings to be in the same text tag then you’ll have to concatenate them in JS first. :slight_smile:

Edit: Sorry, I didn’t notice the <Each> when I first answered this.

3

That does work but perhaps I did not give the full context. I am trying to populate the Observable as an array, then render a list of each item using Each

The actual structure returned is:

[{"id":"1"},{"id":"2"},{"id":"3"},{"id":"4"}]

So basically I want to have 4 rows with the numbers of 1…4 printed.
In this case I would have hoped to have

<Each Items="{datas}">
    <StackPanel>
        <Text Value="{id}" />
    </StackPanel>
 </Each>

In the long run I will have more info for each array item: like `[{“id”:“1”, “name”:“John:”},{“id”:“2”, “name”:“Paul”}] and would want to print names.

I think it is my incorrect understanding of arrays and mixing them with Observables.

4

Still not clear what the actual problem is then. :slight_smile:

If you’re just wondering how to populate an observable list based on an array then: myList.replaceAll(sourceArray);

You can read more about the Observable API here

5

I come from a .Net background so still getting used to JS and Observables.

Your suggestion to look at the docs worked… I used addAll

   let arr = [{ "id": "1" }, { "id": "2" }, { "id": "3" }, { "id": "4" }];
   datas.addAll(arr);

Which now shows 4 rows with each number displayed. replaceAll would be the same but clearing the array first.

Thanks

6

Great that it worked out! :slight_smile: