폴리머 다트 페이지 매기기

Question

날짜가있는 목록이 있습니다. 이 목록은 20에서 20까지 동적으로로드되므로 내 데이터의 페이지 매김을 원합니다. 나는 모든 친구를 표시 할 때 작동

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

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

@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(); 
} 

.
지금, 나는 내가 changes.listen를 사용하여 생각 생각 (20)
20에 의해 friends의 부분 범위로 friendsView을 싶지만 friends은, HTML의 인스턴스 변화를 주입 할 때 때문에 작동하지 않습니다.
또 다른 문제는로드가 완료되지 않은 경우에도 데이터를 표시하려고합니다. 그래서 목록의 범위에 신중해야하고 friends의 동적 범위가되어야하고 의 데이터가 변경 될 때마다 데이터는 friendsView으로 변경되어야합니다.

어떻게 해결할 수 있습니까? 아니면 누군가 내 목록에 페이지 매기기를하는 것이 더 좋습니다.

Answer 1

마침내 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을 알립니다. 나는 그것이 최선의 방법이라면 지금은하지 않는다.