Node / Express - 当用户使用Snoocore(Reddit API包装器)点击页面底部时,将信息附加到列表

时间:2017-01-22 22:42:33

标签: javascript jquery node.js express

我正在开发一个food sub reddit的私有应用程序,我正在检索一些图像,每个视图限制20个图像,当用户到达页面底部时,它会加载更多信息并附加它,如ajax ;我正在使用请求服务器端并使用Snoocore,它是Reddit的API包装器。 Snoocore实际上提供了一种获取下一页信息的方法。来自Snoocore的文档:

// Instead of an HTTP verb, use a Snoocore helper `.listing`
// It will return a "slice" for a listing that has various 
// helpers attached to it.
reddit('/r/askreddit/hot').listing().then(function(slice) {

  // This is the front page of /r/askreddit
  // `slice.children` contains the contents of the page.
  console.log(slice.children);

  // Get a promise for the next slice in this 
  // listing (the next page!)
  return slice.next();

}).then(function(slice) {

  // This is the second page of /r/askreddit
  console.log(slice.children);

});

这是我的代码:

    reddit('/r/food/hot').listing({limit: 10}).then(result => {
        for (var x in result.children){
            if (result.children[x].data.link_flair_text === '[Homemade]' || result.children[x].data.link_flair_text === '[homemade]') {
                if (result.children[x].data.domain !== 'imgur.com') {

                    if (result.children[x].data.post_hint !== "rich:video") {

                        titles.push({
                            'title': he.decode(result.children[x].data.title),
                            'imgurl': he.decode(result.children[x].data.url),
                            'user': result.children[x].data.author,
                            'submission': result.children[x].data.permalink
                        });

                    }

                }
            }
        }
        console.log(result.children[4].data);

        res.render('index', {
            'titleArr': titles
        });

    });

在我的Pug模板上我有:

extends layout

block content
    div#wrap
        each i in titleArr
            figure.figure
                img.img-fluid.img-rounded(src= i.imgurl) 

                figcaption.figure-caption.text-center
                    p.text-muted #[i #{i.title}]
                    p 
                        | #[i ―by ] 
                        a(href="http://reddit.com" + i.submission, target="_blank")
                            | #[i /u/#{i.user}]

listing({limit: 10})这里很重要,因为它限制了检索的帖子;实际上我只检索了10个,默认情况下检索25个;无论如何,我正在寻找一种方式,我怎么说当用户到达页面底部时它会加载更多帖子;我必须通过客户端这样做吗?或者我可以通过某种方式通过服务器端执行此操作吗?告诉我是否需要更深入地解释我的问题。

1 个答案:

答案 0 :(得分:0)

您正在寻找的是“无限滚动”,当您的用户到达已呈现的页面底部时,您基本上想要执行另一个请求。

这将要求您在浏览器滚动到达页面底部时触发ajax请求。如果您使用jQuery,您的代码将如下所示:

nanosleep() required for timing operations.

每当用户到达页面底部时,这将触发ajax请求,并正确分页。不过,这只是浏览器方面。

您还需要稍微编辑服务器端点。

例如,您需要动态增加限额

    $(document).ready(function() {
    var win = $(window);


    var parts = location.pathname.split("/");

    // assuming a url like domain.com/reddit/10 where 10
    // is the total number of posts you're showing 
    var pageNumber = parts[3]; //this gives you access to the `10`

    // then add 10 to the current page number and 
    pageNumber += 10

    // use that for your ajax request 
    var url = "http://domain.com/reddit/"+pageNumber; 

    // Each time the user scrolls
    win.scroll(function() {
        // End of the document reached?
        if ($(document).height() - win.height() == win.scrollTop()) {
            $('#loading').show();

            $.ajax({
                url: url,
                dataType: 'json',
                success: function(json) {
                    // do something with your json of your posts
                    // then hide the loading gif or image.
                    $('#loading').hide();
                }
            });
        }
    });
});

访问//you could use the req.params method from express to accomplish this reddit('/r/food/hot').listing({limit: req.params.limit}).then(result => { for (var x in result.children){ if (result.children[x].data.link_flair_text === '[Homemade]' || result.children[x].data.link_flair_text === '[homemade]') { if (result.children[x].data.domain !== 'imgur.com') { if (result.children[x].data.post_hint !== "rich:video") { titles.push({ 'title': he.decode(result.children[x].data.title), 'imgurl': he.decode(result.children[x].data.url), 'user': result.children[x].data.author, 'submission': result.children[x].data.permalink }); } } } } console.log(result.children[4].data); res.render('index', { 'titleArr': titles }); }); 变量应该有效。您还需要编辑端点定义。我不确定你现在如何使用服务器的路由设置,但这是你可以做到的一种方式:

req.params.limit

这里的想法是你希望增加每个jQuery请求获取的项目数。这是一个非常快速和肮脏的方式,我正在做一些关于你如何处理服务器和你正在使用的假设,但这应该让你90%的方式。希望这可以帮助!