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

Question

我正在使用此代码无限加载方形空间上的页面。我的问题是重新加载没有捕获我在 url 中设置的过滤。它似乎看不到我收藏中的变量，甚至看不到 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>

Answer 1

我能够让这个脚本按照我想要的方式工作。

我以为我可以使用:

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

我们准备好了!