Skip to content

Commit 1f943c2

Browse files
author
Vlad Balin
committed
Update README.md
1 parent 4e68974 commit 1f943c2

File tree

1 file changed

+42
-19
lines changed

1 file changed

+42
-19
lines changed

README.md

Lines changed: 42 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -178,34 +178,57 @@ Event subscription is managed automatically. No props passed - no problems.
178178

179179
## Data binding
180180

181-
`nestedreact` supports data binding based compatible with standard React's `valueLink`.
181+
`nestedreact` supports data binding links compatible with standard React's `valueLink`.
182182
Links are "live" in a sense that they always point to actual value based on current model or collection state.
183183
It doesn't break anything in React, rather extends possible use cases.
184184

185-
- `var link = model.getLink( 'attr' )` creates link for model attribute. That link can
186-
be further transformed to valueLink for boolean property:
187-
- `link.equals( x )` creates boolean link which is true whenever link value is equal to x.
188-
- `link.contains( x )` creates boolean link which is true whenever x is contained in an array in link value.
189-
Updates to enclosed array made through this property will trigger model updates.
190-
Avoid long arrays, operations has O(N^2) complexity.
191-
- `var link = collection.getLink( model )` creates link for boolean property, toggling model in collection.
185+
- `var link = model.getLink( 'attr' )` creates link for model attribute.
186+
- `var link = collection.getLink( model )` creates boolean link, toggling model in collection. True if model is contained in collection, assignments will add/remove given model. Useful for checkboxes.
192187

193-
All links supports following additional methods:
194-
- `link.val( x )`, `link.set( x )` working the same as `link.requestChange( x )`
195-
- `link.val()`, `link.get()` get link value
196-
- `link.toggle()` works the same as `link.set( !link.get() )`
188+
### Value access methods
197189

198-
Standard members `link.requestChange( x )` and `link.value` also works.
199-
Assignments to `link.value` are allowed, and works in the same way as `link.set`.
190+
In addition to standard members `link.requestChange( x )` and `link.value`, links supports all popular property access styles:
200191

201-
Most efficient way to work with link is using `link.val()` function.
192+
- jQuery property style: setter `link.val( x )`, getter `link.val()`
193+
- Backbone style: setter `link.set( x )`, getter `link.get()`
194+
- plain assugnments style: setter `link.value = x`, getter `link.value`
195+
- `link.toggle()` is a shortcut for `link.requestChange( !link.value )`
202196

203-
Link received through component props can be linked with state member using
204-
the following declaration:
197+
Most efficient way to work with link is using `link.val()` function, that's how its internally implemented. `val` function is bound, and can be passed around safely.
198+
199+
### Link transformations
200+
201+
Attribute's link can be further transformed using extended link API. Link transformations allowing you to use new `stateless functions` component definition style introduced in React 0.14 in most cases.
202+
203+
For links with any value type:
204+
205+
- `link.equals( x )` creates boolean link which is true whenever link value is equal to x. Useful for radio groups.
206+
- `link.update( x => !x )` creates function transforming link value (toggling boolean value in this case). Useful for `onClick` event handlers.
207+
208+
For link enclosing array:
209+
210+
- `arrLink.contains( x )` creates boolean link which is true whenever x is contained in an array in link value. Useful for checkboxes. Avoid long arrays, currently operations has O(N^2) complexity.
211+
212+
For link enclosings arrays and plain JS objects:
213+
- `arrOrObjLink.at( key )` creates link to array of object member with a given key. Useful when working with plain JS objects in model attributes.
214+
- `arrOrObjLink.map( ( itemLink, key ) => <input key={ key } valieLink={ itemLink } /> )` iterates through object or array, wrapping its elements to links. Useful for JSX transofrmation.
215+
216+
### Links and components state
217+
218+
Link received through component props can be mapped as state member using the following declaration:
205219
```javascript
206220
attributes : {
207221
selected : Nested.link( '^props.selectedLink' )
208222
}
209223
```
210-
It can be accessed as a part of state, however, `link.requestChanges` will be call on assignment
211-
instead of state modification. Its value will be updated automatically when component will receive new props.
224+
It can be accessed as a part of state, however, in this case it's not true state. All read/write operations will be done with link itself, and local state won't be modified.
225+
226+
Also, links can be used to declaratively expose real component state to upper conponents. In this example, link optionally received in props will be updated every time `this.state.selected` object is replaced. In this case, updates are one way, from bottom component to upper one, and stateful component will render itself when state is changed.
227+
228+
```javascript
229+
attributes : {
230+
selected : Item.has.watcher( '^props.selectedLink.val' )
231+
}
232+
```
233+
234+
Technically, "watcher" - is just a callback function with a single argument receiving new attribute value, so links are not required here.

0 commit comments

Comments
 (0)