You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+39-34Lines changed: 39 additions & 34 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -202,28 +202,57 @@ var Bottom = React.createClass({
202
202
});
203
203
```
204
204
205
-
## Data binding
205
+
#Two-way data binding
206
206
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.
208
211
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.
210
213
211
-
`var link = object.getLink( 'attr' )`
214
+
You can create link for any property of the state, as well as for any model.
212
215
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' )`
215
217
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:
217
222
218
223
```javascript
219
224
var Nested =require( 'nestedtypes' );
220
225
221
226
var link =newNested.Link( value, function( x ){ /* update */ } );
222
227
```
223
228
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.
225
254
226
-
###Link validation
255
+
## Link validation
227
256
228
257
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,
229
258
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' )
254
283
255
284
Failed checks will populate link's `validationError` with first failed check's message.
256
285
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
282
287
283
288
Link received through component props can be mapped as state member using the following declaration:
0 commit comments