Support <Each> being a child element of another <Each>

Feature Suggestions
1

Right now it seems this markup isn’t supported:

<StackPanel>
    <Each Items="{items}"> //{items} is a different Observable from {{places}}
        <StackPanel>
            <Each Items="{places}">
                <DockPanel Padding="10" Margin="20,0,0,0" Background="#fff">
                    <Text Value="Hello" />
                </DockPanel>
            </Each>
        </StackPanel>
    </Each>
</StackPanel>

…and it seems like it should be. Thoughts?

For anyone trying to accomplish the same logic, my workaround is to map {places} to each element in {items} in a new variable.

var mappedItems = items.map(function(item){
    return {
        places: places,
        name: item.name
    }
});

Any changes to {places} or {items} will reflect.

2

I can’t seem to edit the post title to be more accurate. It should be something like:

"Support <Each> being a child element of another <Each> where their "Items" attribute are different defined Observables"

Can any mod correct it for me? Thanks :slight_smile:

3

Hi!

This is fully possible, but when you are inside an Each, the next Each will be in the context of the current item.

Take a look at the following code. The outer Each is bound to items. Each item has a name and an Observable - places. The inner Each bound directly to the places.

<App Theme="Basic" Background="#eeeeeeff">
    <Panel>
        <ScrollView>
            <StackPanel>
                <JavaScript>
                    var Observable = require("FuseJS/Observable");

                    var items = Observable(
                            {name: "place1", places: Observable("subitem11", "subitem12", "subitem13", "subitem14")},
                            {name: "place2", places: Observable("subitem21", "subitem22", "subitem23", "subitem24")},
                            {name: "place3", places: Observable("subitem31", "subitem32", "subitem33", "subitem34")},
                            {name: "place4", places: Observable("subitem41", "subitem42", "subitem43", "subitem44")}
                        )
                    module.exports = {items: items};
                </JavaScript>
                <Each Items="{items}">
                    <StackPanel>
                        <Text Dock="Top" FontSize="16" Value="{name}"/>
                        <StackPanel Margin="20">                
                            <Each Items="{places}">           
                                <Text Value="{}" TextColor="#000"/>           
                            </Each>    
                        </StackPanel>
                    </StackPanel>
                </Each>
            </StackPanel>
        </ScrollView>
    </Panel>
</App>
4

Hi,

Can you please help me, I have problem with and Each inside another Each, my json have this structure:

habilidadesAct{ id: x, habilidad: “xxxx”, subHabs:[{ id: y, subHab: “yyy” }] }

My code is:

<ScrollView>
    <StackPanel>
        <Each Items="{habilidadesAct}">
            <StackPanel>
                <Each Items="{subHabs}">
                    <DockPanel Padding="10,20" Margin="2,2" Color="#6fdc6f">
                        <Text Value="{subHab}" Alignment="CenterLeft" />
                        <Text Value="{habilidad}" Alignment="CenterLeft" TextColor="#CCCCCC"/>
                    </DockPanel>
                </Each>
            </StackPanel>
        </Each>
    </StackPanel>
</ScrollView>

the problem is that it doesn`t recognize “habilidad” when I put it inside the second “Each” but it has to be inside the “DockPanel”. So, is there a way to let it know “habilidad” belongs to the first “Each”?