Skip to content

Commit e579090

Browse files
author
Vlad Balin
committed
Update BackboneViews.md
1 parent 962e18f commit e579090

File tree

1 file changed

+16
-1
lines changed

1 file changed

+16
-1
lines changed

docs/BackboneViews.md

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ dealing with small isolated parts of the code first.
4545
Or, you can decide to start refactoring from the top. In this case, you will likely want to reuse
4646
your existing lower-level backbone subviews.
4747

48-
You can do it like that. And it will work okay.
48+
You can do it like that.
4949

5050
```javscript
5151
var React = require( 'nestedreact' );
@@ -65,6 +65,8 @@ var MyComponent = React.createClass({
6565
});
6666
```
6767

68+
It's easy, for example, to take [react-router](https://github.com/reactjs/react-router) and use it in your application without any changes in Backbone View layer.
69+
6870
Taking these two features together, you can take literally any view from the subview hierarchy, and replace it with
6971
React component. It will also work fine if there are multiple layers - React using Backbone using React...
7072

@@ -96,6 +98,19 @@ View's state model.
9698
In Backbone, you might assign values from `options` to the model. Do not do this with React. Remember, `options` is `props`.
9799
Therefore, it might be required to remove some items from the View's model.
98100

101+
### Converting EJS template to JSX
102+
103+
I will assume we're using EJS to be specific. JSX is not text, it's hidden JS tree construction expression, thus control structures must be transformed to functional form. In short, branches becomes logical expressions, loops becomes `map` expressions. Expression must return single node or array, in the last case you're required to add `key` attribute. Component must return single node at the top level.
104+
105+
`class` should be substitued with `className`
106+
`<%= expr %>` -> `{ expr }`
107+
108+
`<%if( expr ){%> <div/> <%}%>` -> `{ expr && <div/> }`
109+
110+
`<%if( expr ){%> <div/> <%}else{%> <span/> <%}%>` -> `{ expr ? <div/> : <span/> }`
111+
112+
`<%for( var i = 0; i < arr.length; i++ ){%> <div/> <%}%>` -> `{ arr.map( ( x, i ) => <div key={ i } /> )}`
113+
99114
### Use Existing Model as component's state
100115

101116
If you already have one model, describing View's state (usual pattern is listening to model's `change` event and calling `this.render()`),

0 commit comments

Comments
 (0)