Efficient way to bind once but allowing to refresh the whole items

Question

Let's suppose a list of 1000 items displayed with infinite scrolling.

Each item displays: a person's firstName, lastName, and mood. (to make it simple)

Initially, I didn't want to listen for updates.
So the great angular-bindonce directive or even better: angular 1.3 one-binding feature made the trick.

Now, I created a pull-to-refresh component, allowing to refresh the whole items.
However, as binding once, (and not reloading the page) my whole list didn't take the updates in account.

Using angular-bindonce, I have this currently:

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

The pull-to-refresh triggers this function:

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

Question is:

Is there a way to refresh all the data ONLY when the pull-to-refresh is triggered?
In this case, I would be able to keep this one-binding that would greatly improve performance when dealing with huge lists of persons.

Until now, I'm forced to....use two-way binding, the natural way of Angular works.

More generally, how to deal with huge lists with infinite scrolling that needs to be updated only when some events are triggered?

Answer 1

Get angular-bind-notifier.

Use native bindings (with a somewhat modified syntax) and setup your markup like so:

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

Now, whenever the value of watchedExpression changes - a $broadcast will be sent down through the childscope created by bind-notifier and tell every binding with the :key:expr syntax to re-evaluate.

---

If you need to, you can also send the $broadcast manually in the following format:

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