聚合物飛鏢分頁

我有一個與日期列表。這個列表是20到20的動態加載，所以我想分頁我的數據。聚合物飛鏢分頁

@CustomTag('x-friends') 
class XFriends extends PolymerElement { 
    bool get applyAuthorStyles => true; 

    // Grown dynamically 
    @published List<UserScore> friends; 
    @observable List<UserScore> friendsView; 

    int _page = 1; 

    XFriends.created() : super.created(); 
}

<table> 
    <tr template repeat="{{friend in friendsView}}"> 
    <td>@{{friend.name}}</td> 
    </tr> 
</table>

<x-friends friends={{myFriends}}></x-friends>

，當我想顯示所有的朋友我的工作。現在
，我想通過我想了，用changes.listen是由20 friends子範圍，但因爲當friends在HTML注入，實例改變我不起作用。
另一個問題是我想要顯示數據，即使加載沒有完成。因此，我必須謹慎與列表的範圍和friendsView需要動態範圍friends，每次數據更改friends，數據必須在friendsView更改。

我該如何解決這個問題？或者，也許有人有更好的想法來分頁我的列表？

來源

2014-03-30 Nicolas François

我認爲它會工作，如果你只是將朋友添加到你想要顯示的friendsView列表。你如何設置friendsView？你的問題沒有顯示。 –

是的，這是我的問題的另一點：如何設置列表。我終於找到一些有趣的東西 –

我終於設置了friendsView列表來觀察朋友列表。

final _friendsSymbol = new Symbol("friends"); 
@CustomTag('x-friends') 
class XFriends extends PolymerElement { 

    final FRIENDS_BY_PAGE = 20; 

    bool get applyAuthorStyles => true; 

    @published List<UserScore> friends; 
    @observable List<UserScore> friendsView = toObservable([]); 

    int _page = 0; 

    XFriends.created() : super.created(){ 
    changes.listen((events){ 
     events.forEach((event){ 
     if(event is PropertyChangeRecord && (event as PropertyChangeRecord).name ==  _friendsSymbol){ 
      (friends as ObservableList).changes.listen((_) => _updateViewIndex()); 
     } 
     }); 
    }); 
    } 

    bool next(Event e, var detail, Element target) { 
    _page++; 
    if(_page*FRIENDS_BY_PAGE>=friends.length){ 
     return dispatchEvent(new CustomEvent("nextfriends")); 
    } else { 
     _updateViewIndex(); 
     return true; 
    } 
    } 

    bool prev(Event e, var detail, Element target) { 
    if(_page>0){ 
     _page--; 
     _updateViewIndex(); 
    } 
    return true; 
    } 

    void _updateViewIndex(){ 
    final startIndex = _page*FRIENDS_BY_PAGE; 
    final endIndex = min((_page+1)*FRIENDS_BY_PAGE, friends.length); 
    if(startIndex < friends.length){ 
     friendsView..clear()..addAll(friends.getRange(startIndex, endIndex))..sort(); 
    } 
    } 

}

每次friends我們更新，它通知friendsView。我現在不是最好的方式，它有效。

來源

2014-04-04 21:36:42

聚合物飛鏢分頁

回答

相關問題