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
+42-19Lines changed: 42 additions & 19 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -178,34 +178,57 @@ Event subscription is managed automatically. No props passed - no problems.
178
178
179
179
## Data binding
180
180
181
-
`nestedreact` supports data binding based compatible with standard React's `valueLink`.
181
+
`nestedreact` supports data binding links compatible with standard React's `valueLink`.
182
182
Links are "live" in a sense that they always point to actual value based on current model or collection state.
183
183
It doesn't break anything in React, rather extends possible use cases.
184
184
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.
192
187
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
197
189
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:
200
191
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()`
-`link.toggle()` is a shortcut for `link.requestChange( !link.value )`
202
196
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:
205
219
```javascript
206
220
attributes : {
207
221
selected :Nested.link( '^props.selectedLink' )
208
222
}
209
223
```
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.
0 commit comments