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 ?
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With