Platform: Windows 10
Fuse version: 0.10.0 (build 5986)
Issue: When placing Placeholders
inside an Each
loop the elements inside the Placeholder
appear to duplicate themselves (see below screen shot).
How to Replicate: Run the below code then click on any of the items. After clicking a dark line above each item will appear.
Expected Outcome: When clicking on any of the items the dark line that appears above “hei” should move to the item that was clicked. This works as expected if the first item in the Each
loop is moved out of the Each
loop.
How can I structure this to avoid having to duplicate my UX code?
MainView.ux
<App Theme="Basic" Background="#eeeeeeff">
<DockPanel>
<JavaScript File="MainView.js" />
<MultiLayoutPanel ux:Name="_tabBar" Height="50" Dock="Bottom">
<GridLayout Columns="1*,1*,1*,1*" />
<Each Items="{elements}">
<Panel Name="{element.text}" Color="#75b1bd">
<!-- First -->
<WhileFloat Value="{index}" LessThan="1" >
<Placeholder ux:Name="detailPlaceholder">
<Rectangle ux:Name="_tabBarSlider" Height="4" Color="#548089" Alignment="Top">
<LayoutAnimation>
<Move RelativeTo="LayoutChange" X="1" Duration="0.3" Easing="BackIn"/>
</LayoutAnimation>
</Rectangle>
</Placeholder>
</WhileFloat>
<!-- ALL BUT First -->
<WhileFloat Value="{index}" GreaterThan="0">
<Placeholder Target="_tabBarSlider" />
</WhileFloat>
<Text Value="{element.text}" Padding="7" TextAlignment="Center" />
<Clicked>
<Set _tabBar.LayoutElement="{element.text}" />
</Clicked>
</Panel>
</Each>
</MultiLayoutPanel>
</DockPanel>
</App>
MainView.js
var Observable = require("FuseJS/Observable");
var elem_text = Observable(
{"text": "hei"},
{"text": "hade"},
{"text": "di"},
{"text": "hai"}
);
var elements = elem_text.map(function (x, i) {
return {
element: x,
max_index: elem_text.length - 1,
index: i
};
});
module.exports = {
elements: elements
};