方形空间上的无限滚动获取类别过滤器

时间:2017-12-19 02:35:25

标签: javascript squarespace jsontemplate

我正在使用此代码在方形空间上无限加载页面。我的问题是重新加载不捕获我在我的网址中设置的过滤。它似乎无法“看到”我的集合中的变量甚至url或categoryFilter。我曾尝试使用.var指令,但延迟加载的项目无法查看之前定义的事物的范围。我这里的想法用完了,请帮忙!

编辑:我已经找到了答案,但又得到了另一个问题。

我能够使用window.location.href而不是window.location.pathname来最终获取参数。除非这在IE11中不起作用,所以现在我必须搜索它。

 <script>

 function infiniteScroll(parent, post) {

     // Set some variables. We'll use all these later.
     var postIndex = 1,
         execute = true,
         stuffBottom = Y.one(parent).get('clientHeight') + Y.one(parent).getY(),
         urlQuery = window.location.pathname,
         postNumber = Static.SQUARESPACE_CONTEXT.collection.itemCount,
         presentNumber = Y.all(post).size();

     Y.on('scroll', function() {

         if (presentNumber >= postNumber && execute === true) {
             Y.one(parent).append('<h1>There are no more posts.</h1>')
             execute = false;
         } else {

             // A few more variables.
             var spaceHeight = document.documentElement.clientHeight + window.scrollY,
             next = false;

             /*
                 This if statement measures if the distance from
                 the top of the page to the bottom of the content
                 is less than the scrollY position. If it is,
                 it's sets next to true.
             */
             if (stuffBottom < spaceHeight && execute === true) {
                 next = true;
             }

             if (next === true) {

                 /*
                     Immediately set execute back to false.
                     This prevents the scroll listener from
                     firing too often.
                 */
                 execute = false;

                 // Increment the post index.
                 postIndex++;

                 // Make the Ajax request.
                 Y.io(urlQuery + '?page=' + postIndex, {
                     on: {
                         success: function (x, o) {
                             try {
                                 d = Y.DOM.create(o.responseText);
                             } catch (e) {
                                 console.log("JSON Parse failed!");
                                 return;
                             }

                             // Append the contents of the next page to this page.
                             Y.one(parent).append(Y.Selector.query(parent, d, true).innerHTML);

                             // Reset some variables.
                             stuffBottom = Y.one(parent).get('clientHeight') + Y.one(parent).getY();
                             presentNumber = Y.all(post).size();
                             execute = true;

                         }
                     }
                 });
             }
         }
     });
 }

 // Call the function on domready.
 Y.use('node', function() {
     Y.on('domready', function() {
         infiniteScroll('#content','.lazy-post');
     });
 });


 </script>

1 个答案:

答案 0 :(得分:0)

我能够以我想要的方式运行这个脚本。

我以为我可以使用:

Static.SQUARESPACE_CONTEXT.collection.itemCount

与jsont一样获取{collection.categoryFilter},如下所示:

Static.SQUARESPACE_CONTEXT.collection.categoryFilter

或者这个:

Static.SQUARESPACE_CONTEXT.categoryFilter

它没有用,所以我改为

urlQuery = window.location.pathname

urlQuery = window.location.href

给了我所需的参数。

我遇到的IE11问题是这个脚本使用

window.scrollY

我将其更改为ie11兼容

Window.pageYOffset

我们很高兴去!