Skip to content

Commit

Permalink
Readme draft
Browse files Browse the repository at this point in the history
  • Loading branch information
Pasvaz committed May 8, 2013
1 parent bcbd2f2 commit e24f2ef
Showing 1 changed file with 5 additions and 5 deletions.
10 changes: 5 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,9 @@ For instance, take a look to this snippet:
</li>
</ul>
```
Angular internally creates a `$watch` for each `ng-*` directive in order to keep the data up to date, so in this example just for displaying few info it creates 6 + 1 (*ngRepeatWatch*) watchers per `person`, even if the `person` is supposed to remain the same once shown. Iterate this amount for each person and you can have an idea about how easy is to reach 2000 watchers. Now if you need it, because those data could change while you show the page, or are bound to some models, it's ok. But most of the time they are static data that don't change once rendered. This is where **bindonce** can really help you.
Angular internally creates a `$watch` for each `ng-*` directive in order to keep the data up to date, so in this example just for displaying few info it creates 6 + 1 *(ngRepeatWatch)* watchers per `person`, even if the `person` is supposed to remain the same once shown. Iterate this amount for each person and you can have an idea about how easy is to reach 2000 watchers. Now if you need it because those data could change while you show the page or are bound to some models, it's ok. But most of the time they are static data that don't change once rendered. This is where **bindonce** can really help you.

This is how **bindonce** handles the above example:
The above example done with **bindonce**:
```html
<ul>
<li bindonce ng-repeat="person in Persons">
Expand All @@ -33,9 +33,9 @@ This is how **bindonce** handles the above example:
</li>
</ul>
```
Now this example uses **0 watches** per `person` and renders the same result as the above that uses ng-*. *(Angular still uses 1 watcher for ngRepeatWatch)*
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 smart approach
### The smart approach
OK until here nothing completely new, with a bit of efforts you could create your own directive and render the `person` inside the `link` function, or you could use [watch fighters](https://github.com/abourget/abourget-angular) that has a similar approach, but there is still one problem that you have to face and **bindonce** already handles it: *the existence of the data when the directive renders the content*. Usually the directives, unless you use watchers or bind their attributes to the scope (still a watcher), render the content when they are loaded into the markup, if at that given time your data are not available the directive can't render it. Bindonce can wait until the data are ready before to render the content.
Let's give a look to the follow snippet to better understand the concept:
```html
Expand Down Expand Up @@ -64,7 +64,7 @@ Here is how we can solve this issue with **bindonce**:
<p bo-class="{'fancy':Person.isNice}" bo-html="Person.story"></p>
</div>
```
`bindonce="Person"` does the trick, any `bo-*` attribute belonging to `bindonce` waits until the parent `bindonce="{somedata}"' is validated before to render its content. Once the scope contains the value `Person` then every bo-* children get filled with the proper values. In order to accomplish this job, **bindonce** uses just one temporary watcher, no matters how many children need to be rendered, as soon as it gets `Person` the watcher is properly removed.
`bindonce="Person"` does the trick, any `bo-*` attribute belonging to `bindonce` waits until the parent `bindonce="{somedata}"` is validated and only then it renders its content. Once the scope contains the value `Person` then every bo-* children get filled with the proper values. In order to accomplish this job, **bindonce** uses just one temporary watcher, no matters how many children need to be rendered, as soon as it gets `Person` the watcher is properly removed.

## License
MIT

0 comments on commit e24f2ef

Please sign in to comment.