的JavaScript - instafeed.js - 限制與過濾器

Question

我使用instafeed.js加載從Instagram的一些照片，我有一個加載進設置特定的標籤作爲過濾器的小功能。就像這樣：

function generateFeed(category){ 
    var feed = new Instafeed({ 
      target: category+'Feed', 
      get: 'user', 
      userId: 'USERID', 
      accessToken: 'TOKEN', 
      sortBy: 'most-recent', 
      template: '<div id="insta-card" class="animated fadeIn col-lg-4 col-md-4 col-sm-4 col-xs-4"><a class="fancybox-thumb-'+category+'" rel="fancybox-thumb" href="{{image}}"><img class="insta-img" src="{{image}}"></a><div class="insta-infos"><p>{{caption}}</p></div></div>', 
      limit: '12', 
      resolution: 'standard_resolution', 
      filter: function(image) { 
       return image.tags && image.tags.indexOf(category) >= 0; 
      }, 
      after: function(){ 
      if (!this.hasNext()) { 
       $('.load-button').hide(); 
      }else{ 
       $('.load-button').show(); 
      } 
      } 
     }); 
feed.run(); 

$('.load-button').on('click',function(){ 
     feed.next(); 
}); 
} 

一切運作良好，但它似乎像限制（在這種情況下12）不加載的照片的限制，但照片的極限來獲取搜索標籤。

如果在此限制內沒有帶有該標籤的照片，則如果此照片存在且具有該標籤，則該Feed也將爲空！

有沒有辦法解決這個問題？在通過過濾器搜索時將限制設置爲最大值（60）？

這將是容易，如果限制可以從feed.next（）函數傳遞，但我還沒有找到什麼工作的。

任何人都可以幫助我嗎？

謝謝。

Answer 1

您應該將limit設置設定爲較高的值，並手動限制filter函數內部結果的最大數量。

爲了維持在調用此行爲.next()，你應該在每次進料負荷重置計數器：

function generateFeed(category){ 
    var currentCount = 0; 
    var feed = new Instafeed({ 
    target: category+'Feed', 
    get: 'user', 
    userId: 'USERID', 
    accessToken: 'TOKEN', 
    sortBy: 'most-recent', 
    template: '<div id="insta-card" class="animated fadeIn col-lg-4 col-md-4 col-sm-4 col-xs-4"><a class="fancybox-thumb-'+category+'" rel="fancybox-thumb" href="{{image}}"><img class="insta-img" src="{{image}}"></a><div class="insta-infos"><p>{{caption}}</p></div></div>', 
    limit: '60', 
    resolution: 'standard_resolution', 
    before: function() { 
     currentCount = 0; 
    }, 
    filter: function(image) { 
     // put your real limit here 
     var shouldDisplay = (currentCount < 12); 

     if (shouldDisplay) { 
     if (image.tags && image.tags.indexOf(category) >= 0) { 
      currentCount += 1; 
     } else { 
      shouldDisplay = false; 
     } 
     } 

     return shouldDisplay; 
    }, 
    after: function(){ 
     if (!this.hasNext()) { 
     $('.load-button').hide(); 
     } else{ 
     $('.load-button').show(); 
     } 
    } 
    }); 
    feed.run(); 

    $('.load-button').on('click', function(){ 
    feed.next(); 
    }); 
} 

請記住，如果您的API客戶端是在Sandbox Mode，您的通話僅限於無論您將limit設置爲什麼，都有20個項目，所以這可能對您的影響不大。