How to implement pull-to-refresh

How-to Discussions
1

I built a news app with Fuse. But I need to implement pull-to-refresh and click-to-refresh. Can someone show me how to do that? Below is my code:

file
AFTeqGcEyZnL-image-1512721690709.jpg370×725

var Observable = require("FuseJS/Observable"); var moment = require('js/moment'); 
    var data = Observable();

    function Article(item) {
        this.title = item.thread.title;
        this.site = item.thread.site;
        this.text = item.text,
        this.likes = item.thread.social.facebook.likes;
        this.published = moment(item.thread.published).startOf('hour').fromNow();
        this.image = item.thread.main_image;
          };

    fetch("http://webhose.io/filterWebContent?token=30bb5809-d008-4e52-ad69-c9da331795af&format=json&ts=1512374473862&sort=published&q=(vanguardngr.com%20OR%20site%3Apunchng.com%20OR%20site%3Aguardian.ng%20OR%20site%3Abounce.ng%20OR%20site%3Abellanaija.com%20OR%20site%3Adailypost.ng%20OR%20site%3Anigerianpilot.com%20OR%20site%3Atheinfostride.com%20OR%20site%3Athenationonlineng.net%20OR%20site%3Atribuneonlineng.com)%20location%3ANigeria")
    .then(function(response) { return response.json(); })
    .then(function(responseObject) {
        var items = [];
        for (var i in responseObject.posts) {
            items.push(new Article(responseObject.posts[i]));
        }
        data.replaceAll(items);
    });
 
module.exports = {
		dataSource: data,
			getNewsDetail: function(args){
			newsRouter.push("newsdetail", args.data)
		},
		
	}

 
</JavaScript>

<DockPanel>
	<StackPanel Dock="Top" Color="#FF5061" Height="65" ux:Name="sidebarFade">
		<Panel Height="56" Margin="0, 15, 0, 10">
			<Panel Height="56">
				<Hamburger Alignment="Left">
					<Clicked>
						<NavigateToggle Target="sidebar" />
					</Clicked>
				</Hamburger>
			</Panel>
			<Text Value="News" Alignment="Center" Color="#FFF" FontSize="20" />
		</Panel>
	</StackPanel>
	<Loading />
	<ScrollView LayoutMode="PreserveVisual">		
	<StackPanel ItemSpacing="5">
			<Each Items="{dataSource}">
				<StackPanel>
					<DockPanel Tapped="{getNewsDetail}">
						<Grid RowCount="1" ColumnCount="2" Margin="10">
						<Panel>
						<Image Url="{image}" StretchMode="UniformToFill" MaxHeight="100" Margin="0, 0, 10, 0"/>
						<WhileFalse>
						<Image File="../Assets/placeholder2.png" StretchMode="UniformToFill" MaxHeight="100" Margin="0, 0, 10, 0"/>
						</WhileFalse>				
						</Panel>
						<StackPanel Padding="0, 10, 10, 10">
						<headerBg Alignment="Left" Padding="5,2,5,2" CornerRadius="2,2,2,2"><Text Value="{site}" TextWrapping="Wrap" Alignment="TopLeft" FontSize="12" Color="#ffffff"/>
						</headerBg>
						<Text Value="{title}" Font="OpenSans2" FontSize="13" TextWrapping="Wrap" Alignment="TopLeft" Margin="0, 5, 0, 0" />
						<Text Value="{published}" TextWrapping="Wrap" Alignment="TopLeft" FontSize="14" Color="Green"/>
						</StackPanel>
					</Grid>
				</DockPanel>
					<Rectangle Layer="Background" Color="#fff" Margin="5,5,5,0">
						<Shadow Size="2" Distance="2" Color="#0003" />
				</Rectangle>
				</StackPanel>
				
			</Each>
	</StackPanel>
	<Scrolled To="End" Within="300">
		</Scrolled>
</ScrollView>
	</DockPanel>
</EdgeNavigator>
2

There’s an example of pull-to-reload here, which probably does what you want.