Imagine a scenario where a list of 1000 items is displayed using infinite scrolling.
Each item on the list includes a person's firstName, lastName, and mood for simplicity.
Initially, I didn't want to constantly listen for updates.
Fortunately, the amazing angular-bindonce directive or the even better angular 1.3 one-binding feature came to the rescue.
Now, I have implemented a pull-to-refresh component that allows refreshing the entire list of items.
However, with binding once and not reloading the page, my list does not take the updates into account.
Here is the current setup using 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>
The pull-to-refresh triggers this function:
$scope.refresh() {
Persons.getList(function(response)) {
$scope.persons = response.data; //data being an array
}
}
Now, the question arises:
Is there a way to refresh all the data ONLY when the pull-to-refresh is triggered?
This would enable me to maintain the one-binding approach and significantly enhance performance while dealing with large lists of persons.
Currently, I am compelled to resort to two-way binding, which is the default approach in Angular.
On a broader note, how should one handle massive lists with infinite scrolling that require updating only upon specific events?