I have Page 1 where I load data from a JSON source. This works great.
I have a click handler, where if clicked, i’d like to populate page 2 from the data from the JSON source loaded previously.
Basically the page 1 click provides the ID of the child notes to be loaded and drawn in to page 2.
However, even though it’s mapped to a function, it’s not actually drawing anything on page2, it’s coming up empty.
This is the javascript:
var Observable = require("FuseJS/Observable");
var data = Observable();
var mata;
fetch('https://my.json.soource.com')
.then(function(response) { return response.json(); })
.then(function(responseObject) {
mata = responseObject;
data.value = responseObject;
});
var locobj = [];
var foo = function(e){
var clickedID = e.data.ID;
mata.ChildNode.forEach(function(Location){
locobj.push(Location);
}
})
}
//console.log(JSON.stringify(locobj))
module.exports = {
data: data,
foo: foo,
locations:locobj
};
Using the monitor I can see that when I click Page 1, i get actual location objects, so the loading part works.
Code for Page 1:
<Page ux:Name="page1">
<ScrollView>
<Grid ColumnCount="1">
<Each Items="{data.ParentNode}">
<DockPanel Height="300" Margin="10,20">
<Rectangle Layer="Background" CornerRadius="10" Fill="#fff" />
<Rectangle Height="200" Dock="Top" Margin="0,-10">
<Image File="{Thumb}" Height="230" Padding="30" />
</Rectangle>
<Clicked Handler="{foo}">
</Clicked>
<Panel>
<Text Value="{Title}" TextAlignment="Left" Alignment="Left" Margin="10,0" Padding="10" Dock="Top" FontSize="22" />
<Text Value="{Description}" TextAlignment="Left" Alignment="Left" Margin="10,30" Padding="10" Dock="Top" TextWrapping="Wrap" />
<Text Value="{Thumb.length}" TextAlignment="Left" Alignment="Left" Margin="10,-10" Padding="10" Dock="Top" TextWrapping="Wrap" />
</Panel>
</DockPanel>
<Clicked>
<Set nav.Active="page2" />
</Clicked>
</Each>
</Grid>
</ScrollView>
<WhileActive Threshold="0.5">
<Set shrinkIndicatorWidth.Value="false" />
<Set indicatorColorAttractor.Value="color0" />
<Set bgColorAttractor.Value="color0" />
<Set titleTextAttractor.Value="color0" />
</WhileActive>
<ActivatingAnimation>
<Change h1.Opacity="1" />
<Change col1.Width="2" />
<Change c1.Color="White" />
</ActivatingAnimation>
</Page>
Page 2 is very much the same, except it uses the location object:
<Page ux:Name="page2">
<ScrollView>
<Grid ColumnCount="1">
<Each Items="{locations}">
<DockPanel Height="300" Margin="10,20">
<Rectangle Layer="Background" CornerRadius="10" Fill="#fff" />
<Rectangle Height="200" Dock="Top" Margin="0,-10">
<Image File="Assets/{Thumb}" Height="230" Padding="30" />
</Rectangle>
<Panel>
<Text Value="{Title}" TextAlignment="Left" Alignment="Left" Margin="10,0" Padding="10" Dock="Top" FontSize="22" />
<Text Value="{Description}" TextAlignment="Left" Alignment="Left" Margin="10,30" Padding="10" Dock="Top" TextWrapping="Wrap" />
</Panel>
</DockPanel>
</Each>
</Grid>
</ScrollView>
</Page>
So why is page 2 coming up empty if there's location objects being returned as part of the click?
I'm presuming the initial draw has no location object, so nothing is drawn.
Then when I click, I need to force a redraw, which I dont know how to do?