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

refresh-on directive could do the trick, found a reference HERE:

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

Answer 2

Instead of trying to work around not using two-way binding but still have all of its benefits there is more likely and easier solution. You say that there are 1,000 rows, are all 1,000 rows with the viewport / visible to the user at once?

I would assume not, so I would suggest using a buffered view for the list of items. Buffering the rows would mean that the rows that are not visible have no bindings but still take up space in the DOM so the scroll bar is always accurate.

The one major caveat of buffering is that all rows should be the same height, no variable height rows.

Here are some virtual scrolling / buffering directives to take a look at:

https://github.com/EnzeyNet/VirtualScroll

https://github.com/stackfull/angular-virtual-scroll

https://github.com/kamilkp/angular-vs-repeat

Answer 3

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.