angular-bind-notifier

on demand refreshing of angular bindings

Project maintained by kasperlewau Hosted on GitHub Pages — Theme by mattgraham
Examples of bind-notifier usage at the bottom.
* Press 'start' to see watchCount and the result of different bindings.
* 'Kill 'em all' to clean out.


NOTE: perceived performance is not realistic, as the calculation of $$watchers is incredibly heavy when you get to a high enough element count. Take the observed results with a grain of salt.

Regular bindings

<div>
  <i ng-repeat="e in els">{{ "{{e" + "}" + "}" }}</i>
</div>
            
Watch Count(-2): {{watchCount-2}}
Element Count: {{elCounter}}
{{e}} 
IT WORKS! but... oh so heavy.

Regular bindings (w/ track by)

<div>
  <i ng-repeat="e in els track by $index">{{ "{{e" + "}" + "}" }}</i>
</div>
            
Watch Count(-2): {{watchCount-2}}
Element Count: {{elCounter}}
{{e}} 
IT WORKS! but... oh so heavy.

Regular bindings (w/ track by) (w/ shuffle)

<div>
  <i ng-repeat="e in els track by $index">{{ "{{e" + "}" + "}" }}</i>
</div>
            
Watch Count(-2): {{watchCount-2}}
Element Count: {{elCounter}}
{{e}} 
IT WORKS! but... oh so heavy.

One time bindings

<div>
  <i ng-repeat="e in els">{{ "{{::e" + "}" + "}" }}</i>
</div>
            
Watch Count(-2): {{watchCount-2}}
Element Count: {{elCounter}}
{{::e}} 
IT WORKS! smoooth....

One time bindings (w/ track by)

<div>
  <i ng-repeat="e in els track by $index">{{ "{{::e" + "}" + "}" }}</i>
</div>
            
Watch Count(-2): {{watchCount-2}}
Element Count: {{elCounter}}
{{::e}} 
IT WORKS! smoooth....

One time bindings (w/ track by) (w/ shuffle)

<div>
  <i ng-repeat="e in els track by $index">{{ "{{::e" + "}" + "}" }}</i>
</div>
            
Watch Count(-2): {{watchCount-2}}
Element Count: {{elCounter}}
{{::e}} 
IT... IT DOESN'T WORK!

Notified ng-repeat/one time bindings

<div bind-notifier="{ ns: rebind }">
  <i ng-repeat="e in :ns:els">{{ "{{::e" + "}" + "}" }}</i>
</div>
            
Watch Count(-2): {{watchCount-2}}
Element Count: {{elCounter}}
{{::e}} 
IT WORKS! and it's got the moves like jaggy...

Notified ng-repeat/one time bindings (w/ track by)

<div bind-notifier="{ ns: rebind }">
  <i ng-repeat="e in :ns:els track by $index">{{ "{{::e" + "}" + "}" }}</i>
</div>
            
Watch Count(-2): {{watchCount-2}}
Element Count: {{elCounter}}
{{::e}} 
IT WORKS! and it's got the moves like jaggy...

Notified ng-repeat/one time bindings (w/ track by) (w/ shuffle)

<div bind-notifier="{ ns: rebind }">
  <i ng-repeat="e in :ns:els track by $index">{{ "{{::e" + "}" + "}" }}</i>
</div>
            
Watch Count(-2): {{watchCount-2}}
Element Count: {{elCounter}}
{{::e}} 
IT... IT DOESN'T WORK!

Notified all the things (w/ track by) (w/ shuffle)

<div bind-notifier="{ ns: rebind }">
  <i ng-repeat="e in :ns:els track by $index">{{ "{{:ns:e" + "}" + "}" }}</i>
</div>
            
Watch Count(-2): {{watchCount-2}}
Element Count: {{elCounter}}
{{:ns:e}} 
IT WORKS! and it's got the moves like jaggy...

Regular repeat/notified bindings (w/ track by) (w/ shuffle)

<div bind-notifier="{ ns: rebind }">
  <i ng-repeat="e in els track by $index">{{ "{{:ns:e" + "}" + "}" }}</i>
</div>
            
Watch Count(-2): {{watchCount-2}}
Element Count: {{elCounter}}
{{:ns:e}} 
IT WORKS! shuffling, whenever...

Regular repeat/length-notified bindings (w/ track by) (w/ shuffle)

<div bind-notifier="{ ns: els.length }">
  <i ng-repeat="e in els track by $index">{{ "{{:ns:e" + "}" + "}" }}</i>
</div>
            
Watch Count(-2): {{watchCount-2}}
Element Count: {{elCounter}}
{{:ns:e}} 
IT WORKS! though, it's not the intended use case.

Length notify all the things (w/ track by) (w/ shuffle)

<div bind-notifier="{ ns: els.length }">
  <i ng-repeat="e in :ns:els track by $index">{{ "{{:ns:e" + "}" + "}" }}</i>
</div>
            
Watch Count(-2): {{watchCount-2}}
Element Count: {{elCounter}}
{{:ns:e}} 
IT WORKS! though, it's not the intended use case.