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
+35Lines changed: 35 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,6 +7,7 @@ It allows you:
7
7
- To use your existing Backbone Views from React components.
8
8
- To use your existing Backbone Models as React component state.
9
9
- Update React components on Backbone events.
10
+
- Data-binding for models and collections
10
11
11
12
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.
12
13
@@ -174,3 +175,37 @@ var MyComponent = React.createClass({
174
175
175
176
You can update react component on backbone events from component props.
176
177
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
0 commit comments