javascript – 绑定一次但允许刷新整个项目的有效方法

2023年1月10日 227次阅读

让我们假设一个包含无限滚动的1000个项目的列表.

每个项目显示：一个人的firstName,lastName和心情. (简单来说)

最初,我不想听更新.
所以伟大的angular-bindonce指令甚至更好：角度1.3单绑定功能成功了.

现在,我创建了一个pull-to-refresh组件,允许刷新整个项目.
但是,由于绑定一次,(并没有重新加载页面)我的整个列表没有考虑更新.

使用angular-bindonce,我目前有这个：

<div bindonce ng-repeat="person in persons track by person.id">
  <span bo-text="person.firstName"></span>
  <span bo-text="person.lastName"></span>
  <span bo-text="person.currentMood"></span>
</div>

pull-to-refresh触发此功能：

$scope.refresh() {
    Persons.getList(function(response)) {
      $scope.persons = response.data;  //data being an array
    }
}

问题是：

有没有办法在触发刷新时刷新所有数据？
在这种情况下,我将能够保持这种一键式绑定,这将大大提高处理庞大的人员列表时的性能.

直到现在,我被迫……使用双向绑定,这是Angular工作的自然方式.

更一般地说,如何处理具有无限滚动的巨大列表,只有在触发某些事件时才需要更新？

最佳答案 获得
angular-bind-notifier.

使用本机绑定(稍微修改一下语法)并设置标记,如下所示：

<div ng-repeat="person in persons track by person.id" bind-notifier="{ eventKey:watchedExpression }">
  <span>{{:eventKey:person.firstName}}</span>
  <span>{{:eventKey:person.lastName}}</span>
  <!-- or with ng-bind if you prefer that -->
  <span ng-bind=":eventKey:person.currentMood"></span>
</div>

现在,每当watchedExpression的值发生变化时,$broadcast将通过bind-notifier创建的子视图向下发送,并使用：key：expr语法告诉每个绑定重新评估.

如果需要,您还可以按以下格式手动发送$broadcast：

$scope.$broadcast('$$rebind::' + key) // where 'key' === 'eventKey' in the example above.
点赞