your question is so general that it’s hard to provide a simple answer or a straight-forward solution. For working with dynamic ScrollView contents, you might want to take a look at this example.
As for the code you posted, here’s a general approach that should get you started in the right direction:
<App>
<JavaScript>
var Observable = require("FuseJS/Observable");
var posts = Observable();
var isLoading = Observable(false);
function loadpost() {
isLoading.value = true;
doSomethingSlow().then(function(x) {
atEnd.check();
isLoading.value = false;
}).catch(function(e) {
isLoading.value = false;
});
}
function doSomethingSlow() {
var p = new Promise(function(resolve, reject) {
// fetch stuff, then resolve
resolve("done");
// or if something bad happens, reject
// reject("some error");
});
return p;
}
module.exports = {
posts: posts,
loadpost: loadpost,
isLoading: isLoading
}
</JavaScript>
<Panel>
<ScrollView SnapMinTransform="false">
<DockPanel>
<StackPanel>
<Each Items="{posts}">
<Panel>
<Deferred>
<DockPanel>
<Product Title="{title}" Unit="12" Identifier="2" Price="1000" />
</DockPanel>
</Deferred>
</Panel>
</Each>
<WhileTrue Value="{isLoading}">
<!-- show a loading indicator at the bottom of the list -->
</WhileTrue>
</StackPanel>
</DockPanel>
<Scrolled ux:Name="atEnd" To="End" Within="100">
<Callback Handler="{loadpost}" />
</Scrolled>
</ScrollView>
</Panel>
</App>