Too many elements created in Each

Bug Reports
1 
<StackPanel>
    <Each Items="{pages}">  
        <Button Text"{name}" />
        <Rectangle Fill="#212121" Height="5" />
        <Rectangle Fill="Red" Height="5"  />
    </Each>
</StackPanel>

Hi,

there is a strange behaviour with the above code. If there are e.g. 3 elements in pages, I get the layout below. So in first Each loop 2 rectangles are created, in next one 4 and in final one 6.

file
FIJaxoBNd2KJ-legacy-files-CHxA9ibgJxLPCWlz-izFgQXN5qkfVvgAi1YIeSa6U.jpg391×725

2

Thanks for reporting! We’ve created a ticket on it and will get back to you as soon as we know more.

3

Hi,

I am unable to reproduce the problem, i get the below result:

file
9S1W1mm0yjAr-legacy-files-8MhWQxhwBZrPa7Z6-Y_ayeoX6ZD-R9eeW6ibd6PUO.png547×752

From this code:

<App Theme="Basic">
    <JavaScript>
        module.exports = {
            pages: [{name:"haha"}, {name:"hohoooo"}, {name: "yeah"}]
        }
    </JavaScript>
    <StackPanel>
      <Each Items="{pages}">        <Button Text="{name}" />
        <Rectangle Fill="#212121" Height="5" />
        <Rectangle Fill="Red" Height="5"  />
      </Each>
    </StackPanel>
</App>

Can you please provide a complete test case + steps to reproduce?

4

Whole project: https://drive.google.com/open?id=0B4oWw-0WhsI8V3JocTl0bF9JSVk

Rectangles are in row 107/108 of MainView.ux

5

Need permission to access the file.

6

You can just drag/drop the file into the forum to attach it :slight_smile:

7

Sorry!

This should work: https://drive.google.com/file/d/0B4oWw-0WhsI8V3JocTl0bF9JSVk/view?usp=sharing

file

Hm, drag/drop of a .zip does not work?

8

Looks like what’s happening here is not that it creates too many elements. You have 6 pages in your collection, not 3, so the number of black and red rectangles is correct.

The problem seems to be that the {name} binding shows up blank for 4 out of the 6 pages. Only SetA1 and SetB2 shows up. Does this ring a bell?

I have step debugged a bit and I am not able to see exactly why this happens.

9

You are doing this:

<MyButton CornerRadius="1" Text="{name}" TextColor="#000" BackgroundColor="#EEEEEE" Width="120" Height="30" Visibility="{visibleInMainMenu}">

Note this:

Visibility="{visibleInMainMenu}"

This will only hide the button, not the corresponding rectangles.

In your data set, visibleInMainMenu is Collapsed for the four items that don’t show up, so this behavior is exactly correct/as expected.

pages.add({name:"SetA2",
    lol:"b",
    title: "Set A Page 2",
    background: "#546E7A",
    headerVisible: "Visible",
    visibleInMainMenu: "Collapsed",
    swipeLeftEnabled: false,
    swipeLeftTarget: "",
    swipeRightEnabled: true,
    swipeRightTarget: "SetA1",
    buttonBackVisible: "Visible",
    buttonBackTarget: "SetA1",
    egdeNavigatorEnabled: true,
});
10

Of course. An example of not seing the wood for the trees. (if that is the right translation for: Den Wald vor lauter Bäumen nicht sehen).

Again, thanks!