Skip to content

Commit c28178f

Browse files
author
Vlad Balin
committed
Updated docs
1 parent 2103508 commit c28178f

File tree

1 file changed

+35
-0
lines changed

1 file changed

+35
-0
lines changed

README.md

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ It allows you:
77
- To use your existing Backbone Views from React components.
88
- To use your existing Backbone Models as React component state.
99
- Update React components on Backbone events.
10+
- Data-binding for models and collections
1011

1112
Thus, no refactoring of your application is required. You can start writing UI with React immediately replacing your Backbone Views one-by-one, while keeping your existing models.
1213

@@ -174,3 +175,37 @@ var MyComponent = React.createClass({
174175

175176
You can update react component on backbone events from component props.
176177
Event subscription is managed automatically. No props passed - no problems.
178+
179+
## Data binding
180+
181+
`nestedreact` supports data binding based on standard React `valueLink`.
182+
It adds following helpers:
183+
184+
- `var link = model.lget( 'attr' )` creates link for model attribute. That link can
185+
be further transformed to valueLink for boolean property:
186+
- `link.leql( x )` creates boolean link which is true whenever link value is equal to x.
187+
- `link.lhas( x )` creates boolean link which is true whenever x is contained in an array in link value.
188+
- `var link = collection.lhas( model )` creates link for boolean property, toggling model in collection.
189+
190+
All links supports following additional methods:
191+
- `link.set( x )` working the same as `link.requestChanges( x )`
192+
- `link.fset( x )`, returning the function which invokes `link.set( x )` (to be used in click handlers)
193+
194+
Boolean links adds following methods:
195+
- `link.toggle()` works the same as `link.requestChanges( !link.value )`
196+
- `link.ftoggle()` return the function which invokes `link.toggle()`
197+
198+
There are direct methods in `Model` and `Collection` to create click handlers:
199+
- `model.fset( ... )` creates function which will invoke `model.set( ... )`
200+
- `collection.ftoggle( model )` creates function invoking `toggle`.
201+
202+
Link received through component props can be linked with state member using
203+
the following declaration:
204+
```javascript
205+
attributes : {
206+
selected : Nested.valueLink( '^props.selectedLink' )
207+
}
208+
```
209+
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.

0 commit comments

Comments
 (0)