Search code examples
angularjsangularjs-directivebindonce

Understanding bindonce limitations

I've been reading about bindonce as a way of reducing watches and enhance performance. In an effort to better understand the package i made an example with ng-repeat.

JSBIN here

Without bindonce I'm getting 103 watches, 100 list items + 2 buttons.

Using bindonce i'm getting 3 watches, 2 bottons + 1 fort the list.

If I understood binonce correctly, it removes the watch once the binded object is resolved and rendered. So,

How is it possible that using bindonce, changes made to the object are still reflected in the DOM ?

Solution

  • There's a hint in the documentation:

    Now this example uses 0 watches per person and renders exactly the same result as the above that uses ng-. *(Angular still uses 1 watcher for ngRepeatWatch)

    The key is that Angular still keeps a watch on ngRepeat, so if the array changes ngRepeat will re-render the array and the bindonce functionality is re-applied.

    I've updated your jsbin example here to better illustrate this http://jsbin.com/xugemico/2/edit

    Notice the following addition:

    <p>
  Bindonce: first item: 
  <span bindonce="arr" bo-bind="arr[0]"></span>
</p>

    The above code utilizes bindonce on the first array item without ngRepeat's watch in play, you'll see that the value is not updated as per the bindonce inside ngRepeat.