2017-10-15 6 views
0

現在のページの下部に達したときにアイテムを自動的にロードするフィードを作成したいが、スクロール・スクロール・スレッショルドがトリガーしない。私は、テンプレート内の項目を埋めるために私のAPIコールを使用しているとレストランはちゃんと読み込まれます。また、ロード機能をボタンにバインドすると、うまく動作します。鉄のスクロールスレッショルドが決して誘発しないようです。誰かが私に行方不明/間違っていることを私に説明することはできますか?
コード:ポリマーのスクロール・スレッシュホールド・トリガーなし

<iron-scroll-threshold id="threshold" lower-threshold="100" on-lower-threshold="loadMoreData"> 
    <div id="scroller" class="vertical layout center" fill> 
    <template is="dom-repeat" items="[[restaurants]]" filter="{{computeFilter(searchInput)}}" scroll-target="threshold" on-scroll="_scrollHandler"> 
     <!-- Items --> 
    </template> 
    <div class="loadingIndicator" hidden$="[[!loadingRestaurants]]"> 
     <paper-spinner active$="[[loadingRestaurants]]"></paper-spinner> Fetching restaurants</b> 
    </div> 
    </div> 
    </iron-scroll-threshold> 
<script> 
Polymer({ 

    is: 'my-view2', 
    properties: { 
    restaurants:{ 
     type: Array, 
     value: [] 
    }, 
    offset:{ 
     type: Number, 
     value: 0 
    }, 
    limit:{ 
     type: Number, 
     value: 50 
    }, 
    loadingRestaurants: Boolean 
    }, 
    ready: function() { 
    this.$.requestRestaurants.generateRequest(); 
    }, 
    handleResponse: function (data) { 
    var self = this; 
    var response = data.detail.response; 
    response.forEach(function(restaurant){ 
     self.push('restaurants', restaurant); 
    }); 
    console.log(this.restaurants); 
    this.$.threshold.clearTriggers(); 
    }, 
    toggle: function(e) { 
    console.log(this.$.threshold.top); 
    var index = "#collapse" + e.model.__data.index; 
    this.$$(index).toggle(); 
    this.loadMore(); 
    }, 
    loadMore: function() { 
    console.log("test"); 
    this.offset+=50; 
    this.limit+=50; 
    this.$.requestRestaurants.generateRequest(); 
    this.$.threshold.clearLower(); 
    this.$.threshold.clearTriggers(); 
    } 
}); 

答えて

0

ネーミングは矛盾していました

on-lower-threshold="loadMoreData"

loadMore: function()

関連する問題