Skip to content

Commit 7136d75

Browse files
author
Vlad Balin
committed
Fixed link docs
1 parent 3eea688 commit 7136d75

File tree

1 file changed

+39
-34
lines changed

1 file changed

+39
-34
lines changed

README.md

Lines changed: 39 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -202,28 +202,57 @@ var Bottom = React.createClass({
202202
});
203203
```
204204

205-
## Data binding
205+
# Two-way data binding
206206

207-
`nestedreact` supports data binding links compatible with standard React's `valueLink`.
207+
Some lower-level components like custom `<input />` controls does not need models
208+
and collections, rather single value. Also, there might be very different ways how particular
209+
model attribute is bound to UI control. [React Link](https://facebook.github.io/react/docs/two-way-binding-helpers.html)
210+
is the perfect abstraction to isolate data binding details from the particular bound UI control.
208211

209-
Create link for object property of Model, Collection, and every object type created with Object.extend().
212+
`NestedReact` supports data binding links which are backward compatible with standard React's Link.
210213

211-
`var link = object.getLink( 'attr' )`
214+
You can create link for any property of the state, as well as for any model.
212215

213-
Create boolean link, toggling model in collection. True if model is contained in collection, assignments will add/remove given model. Useful for checkboxes.
214-
`var link = collection.hasLink( model )`
216+
`const link = object.getLink( 'attr' )`
215217

216-
Links can be created directly using constuctor:
218+
Or, you can create boolean link, toggling model in collection. `true` if model is contained in collection, assignments will add/remove given model. Useful for checkboxes.
219+
`const link = collection.hasLink( model )`
220+
221+
Links can be created directly using Link constructor, which allows you to handle any custom binding scenario:
217222

218223
```javascript
219224
var Nested = require( 'nestedtypes' );
220225

221226
var link = new Nested.Link( value, function( x ){ /* update */ } );
222227
```
223228

224-
Here's a brief reference for links API. Consult [Guide to Data Binding Use Cases](/example/databinding.md) to understand how to use it.
229+
Below is the brief reference for links API. Consult [Guide to Data Binding Use Cases](/example/databinding.md) to understand how to use it.
230+
231+
## Value access methods
232+
233+
In addition to standard members `link.requestChange( x )` and `link.value`, there are pair of shortcuts available:
234+
235+
- `link.set( x )`, which is a shortcut for `this.requestChange( x )`
236+
- `link.toggle()` is a shortcut for `link.requestChange( !link.value )`
237+
238+
## Link transformations
239+
240+
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.
241+
242+
For links with any value type:
243+
244+
- `link.equals( x )` creates boolean link which is true whenever link value is equal to x. Useful for radio groups.
245+
- `link.update( x => !x )` creates function transforming link value (toggling boolean value in this case). Useful for `onClick` event handlers.
246+
247+
For link enclosing array:
248+
249+
- `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.
250+
251+
For link enclosings arrays and plain JS objects:
252+
- `arrOrObjLink.at( key )` creates link to array of object member with a given key. Can be applied multiple times to work with object hierarchies; on modifications, objects will be updated in purely functional way (modified parts will be shallow copied). Useful when working with plain JS objects in model attributes - updating them through links make changes visible to the model.
253+
- `arrOrObjLink.map( ( itemLink, key ) => <input key={ key } valieLink={ itemLink } /> )` iterates through object or array, wrapping its elements to links. Useful for JSX transofrmation.
225254

226-
### Link validation
255+
## Link validation
227256

228257
Links carry additional `validationError` field for validation purposes (to be used inside of custom UI controls). It's populated automatically for links created from models and collection,
229258
utilizing `nestedtypes` validation mechanics. Therefore, if model attribute has any `check` attached, its link will carry its `validationError` object.
@@ -254,31 +283,7 @@ var link = model.getLink( 'something' )
254283

255284
Failed checks will populate link's `validationError` with first failed check's message.
256285

257-
### Value access methods
258-
259-
In addition to standard members `link.requestChange( x )` and `link.value`, there are pair of shortcuts available:
260-
261-
- `link.set( x )`, which is a shortcut for `this.requestChange( x )`
262-
- `link.toggle()` is a shortcut for `link.requestChange( !link.value )`
263-
264-
### Link transformations
265-
266-
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.
267-
268-
For links with any value type:
269-
270-
- `link.equals( x )` creates boolean link which is true whenever link value is equal to x. Useful for radio groups.
271-
- `link.update( x => !x )` creates function transforming link value (toggling boolean value in this case). Useful for `onClick` event handlers.
272-
273-
For link enclosing array:
274-
275-
- `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.
276-
277-
For link enclosings arrays and plain JS objects:
278-
- `arrOrObjLink.at( key )` creates link to array of object member with a given key. Can be applied multiple times to work with object hierarchies; on modifications, objects will be updated in purely functional way (modified parts will be shallow copied). Useful when working with plain JS objects in model attributes - updating them through links make changes visible to the model.
279-
- `arrOrObjLink.map( ( itemLink, key ) => <input key={ key } valieLink={ itemLink } /> )` iterates through object or array, wrapping its elements to links. Useful for JSX transofrmation.
280-
281-
### Links and components state
286+
## Links and components state
282287

283288
Link received through component props can be mapped as state member using the following declaration:
284289
```javascript

0 commit comments

Comments
 (0)