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

让我们假设一个包含1000个项目的列表以无限滚动方式显示

每个项目显示：一个人的名字、姓氏和情绪。（简单一点）

起初，我不想收听更新。
因此，伟大的指令甚至更好：angular 1.3一个绑定特性实现了这一技巧

现在，我创建了一个组件，允许刷新整个项目。
然而，作为绑定一次（而不是重新加载页面），我的整个列表没有考虑更新

使用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>

问题是:

是否有办法仅在触发拉入刷新时刷新所有数据？
在这种情况下，我将能够保持这个绑定，这将大大提高处理大量人员列表时的性能

到目前为止，我不得不…使用双向绑定，这是角度工作的自然方式

---

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

refresh on

指令可以做到这一点，找到了一个参考：

---

与其尝试解决不使用双向绑定的问题，但仍然有它的所有好处，还有一种更可能、更简单的解决方案。您说有1000行，用户是否可以一次看到所有1000行的视口/视图

我认为不会，所以我建议对项目列表使用缓冲视图。缓冲行意味着不可见的行没有绑定，但仍会占用DOM中的空间，因此滚动条总是准确的

缓冲的一个主要警告是所有行的高度应该相同，没有可变高度的行

下面是一些要查看的虚拟滚动/缓冲指令：

获取

使用本机绑定（使用稍加修改的语法）并按如下方式设置标记：

<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>

---

refresh on

似乎不是bindonce指令的固有版本。您需要最新版本的bindonceIt。github分支中的版本：重新绑定调试具有该指令。是0.3.1。master是0.3.2，但没有。我目前正在使用master。我发现：你说得对，我的链接答案中使用的指令与我的行没有相同的高度有关。你考虑过静态高度吗？使用虚拟滚动指令将使您的应用程序在具有大量数据的情况下具有更好的性能，并使绑定成为一个非问题。某些项目应显示比其他项目更多的信息。我也试过收集爱奥尼亚框架。有意思…你需要按person.id跟踪吗？如果您删除track by，则正常的bind once{：：}语法可以像@chrismarx建议的那样正常工作，从track by$index更改为track by my-unique id似乎很有用work@Ladmerc你可能会喜欢：

<div bindonce="persons" refresh-on="'refresh'" 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>

<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>

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