使用聚合物飞镖进行分页答案

【问题标题】：Pagination with Polymer Dart使用聚合物飞镖进行分页
【发布时间】：2014-03-30 13:22:23
【问题描述】：

我有一个日期列表。这个列表是 20 x 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>

当我想显示所有朋友时，我会工作。
现在，我希望 friendsView 成为 friends 乘 20 乘 20 的子范围。
我想使用changes.listen 但我不工作，因为当friends 注入html 时，实例会发生变化。
另一个问题是即使加载未完成，我也想显示数据。所以我必须谨慎处理列表的范围，friendsView 需要是friends 的动态范围，每次friends 中的数据更改时，friendsView 中的数据都必须更改。

我该如何解决这个问题？或者也许有人有更好的想法来为我的列表分页？

【问题讨论】：

我认为如果您只是将朋友添加到您想要显示的friendsView列表中，它将起作用。你如何设置friendsView？你的问题没有显示出来。
是的，这是我的另一个问题：如何设置列表。我终于找到了一些有趣的东西

标签： dart dart-polymer

【解决方案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();
    }
  }

}

每次friendsus 更新，它都会通知friendsView。我现在不认为这是最好的方法，但它确实有效。

【讨论】：