1 | # Ripple | Components
|
2 | [![Coverage Status](https://coveralls.io/repos/rijs/components/badge.svg?branch=master&service=github)](https://coveralls.io/github/rijs/components?branch=master)
|
3 | [![Build Status](https://travis-ci.org/rijs/components.svg)](https://travis-ci.org/rijs/components)
|
4 | <br>[![Browser Results](https://saucelabs.com/browser-matrix/rijs-components.svg)](https://saucelabs.com/u/rijs-components)
|
5 |
|
6 | Redraws any custom elements on the page when any of it's dependencies change (either the component definition, data, or styles).
|
7 |
|
8 | Given the following markup on your page:
|
9 |
|
10 | ```html
|
11 | <component-name data="something">
|
12 | ```
|
13 |
|
14 | With a `component-name` (function) and `something` (data) registered in Ripple, it will invoke `component-name.call(<el>, something)` whenever a change is detected in either of those resources. Internally, this is basically implemented as follows but in a more generic form:
|
15 |
|
16 | ```js
|
17 | ripple('something').on('change', function(){
|
18 |
|
19 | all('[data=something]')
|
20 | .map(ripple.draw)
|
21 |
|
22 | })
|
23 | ```
|
24 |
|
25 | All instances of Custom Elements will be upgraded automatically. You can also manually invoke renders:
|
26 |
|
27 | ```js
|
28 | ripple.draw(<el> | resource object | resource name)
|
29 | ```
|
30 |
|
31 | If the first parameter is a DOM element, it will rerender that. If it is a resource (name or object), it will rerender anything on your page that depends on that resource.
|
32 |
|
33 | See the [Primer#Components](https://github.com/rijs/docs/blob/master/primer.md#3-components) for more info |
\ | No newline at end of file |