More docs
This commit is contained in:
parent
286a5d8f05
commit
1962bb4abf
33
README.md
33
README.md
|
@ -31,11 +31,11 @@ Writing any html is a valid template. This does not apply to event handlers ("on
|
||||||
## {} to identify JS expression
|
## {} to identify JS expression
|
||||||
In html attributes and text, you can replace context by a javascript expression. You do this by wrapping it in {}. If this is inside an attribute, it still needs to be wrapped by quotes. In text, you can just use it.
|
In html attributes and text, you can replace context by a javascript expression. You do this by wrapping it in {}. If this is inside an attribute, it still needs to be wrapped by quotes. In text, you can just use it.
|
||||||
|
|
||||||
Sample:
|
###### Sample:
|
||||||
```
|
```
|
||||||
<a href="{this.state.linkRef}">{this.state.linkText}</a>
|
<a href="{this.state.linkRef}">{this.state.linkText}</a>
|
||||||
```
|
```
|
||||||
Compiled:
|
###### Compiled:
|
||||||
```
|
```
|
||||||
define([
|
define([
|
||||||
'react',
|
'react',
|
||||||
|
@ -52,11 +52,12 @@ define([
|
||||||
## rt-if
|
## rt-if
|
||||||
This gives you the ability to add conditions to a sub-tree of html. If the condition is evaluated to true, the subree will be returned, otherwise, it will not be calculated. It is implemented by a trinary expression
|
This gives you the ability to add conditions to a sub-tree of html. If the condition is evaluated to true, the subree will be returned, otherwise, it will not be calculated. It is implemented by a trinary expression
|
||||||
|
|
||||||
Sample:
|
|
||||||
|
###### Sample:
|
||||||
```
|
```
|
||||||
<div rt-if="this.state.resultCode === 200">Success!</div>
|
<div rt-if="this.state.resultCode === 200">Success!</div>
|
||||||
```
|
```
|
||||||
Complied:
|
###### Compiled:
|
||||||
```
|
```
|
||||||
define([
|
define([
|
||||||
'react',
|
'react',
|
||||||
|
@ -72,11 +73,11 @@ define([
|
||||||
## rt-repeat
|
## rt-repeat
|
||||||
Repeats a node with its subtree for each item in an array. This is implemented by creating a method that is passed to a map method as a callback. It creates a real context for the iterated variable. It will create an item*Index* variable to represent the index of the item. If the definition is "myNum in this.getMyNumbers()", than there will be 2 variables in the scope: myNum and myNumIndex
|
Repeats a node with its subtree for each item in an array. This is implemented by creating a method that is passed to a map method as a callback. It creates a real context for the iterated variable. It will create an item*Index* variable to represent the index of the item. If the definition is "myNum in this.getMyNumbers()", than there will be 2 variables in the scope: myNum and myNumIndex
|
||||||
|
|
||||||
Sample:
|
###### Sample:
|
||||||
```
|
```
|
||||||
<div rt-repeat="myNum in this.getMyNumbers()">{myNumIndex}. myNum</div>
|
<div rt-repeat="myNum in this.getMyNumbers()">{myNumIndex}. myNum</div>
|
||||||
```
|
```
|
||||||
Complied:
|
###### Compiled:
|
||||||
```
|
```
|
||||||
define([
|
define([
|
||||||
'react',
|
'react',
|
||||||
|
@ -95,14 +96,14 @@ define([
|
||||||
## rt-scope
|
## rt-scope
|
||||||
This directive creates a new javascript scope. It actually creates a new method for this scope, and calls it with its current context. The syntax is `rt-scope="expr1 as var1; expr2 as var2`. This gives a convenience method to shorten stuff up in a scope and make the code more readable. It also helps to execute an expression only once in a scope instead of every chunk that needs it.
|
This directive creates a new javascript scope. It actually creates a new method for this scope, and calls it with its current context. The syntax is `rt-scope="expr1 as var1; expr2 as var2`. This gives a convenience method to shorten stuff up in a scope and make the code more readable. It also helps to execute an expression only once in a scope instead of every chunk that needs it.
|
||||||
|
|
||||||
Sample:
|
###### Sample:
|
||||||
```
|
```
|
||||||
<div rt-repeat="rpt in array">
|
<div rt-repeat="rpt in array">
|
||||||
<div rt-scope="')' as separator; rpt.val as val">{rptIndex}{separator} {val}</div>
|
<div rt-scope="')' as separator; rpt.val as val">{rptIndex}{separator} {val}</div>
|
||||||
<div>'rpt' exists here, but not 'separator' and 'val'</div>
|
<div>'rpt' exists here, but not 'separator' and 'val'</div>
|
||||||
</div>
|
</div>
|
||||||
```
|
```
|
||||||
Complied:
|
###### Compiled:
|
||||||
```
|
```
|
||||||
define([
|
define([
|
||||||
'react',
|
'react',
|
||||||
|
@ -131,7 +132,7 @@ In order to reduce the boiler-plate code when programatically setting class name
|
||||||
1. In react templates, you can use the "class" attribute the same as you'd do in html. If you like, you can even have execution context within
|
1. In react templates, you can use the "class" attribute the same as you'd do in html. If you like, you can even have execution context within
|
||||||
2. You cannot use class and rt-class on the same html element
|
2. You cannot use class and rt-class on the same html element
|
||||||
|
|
||||||
Sample:
|
###### Sample:
|
||||||
```
|
```
|
||||||
<div rt-scope="{blue: true, selected: this.isSelected()} as classes">
|
<div rt-scope="{blue: true, selected: this.isSelected()} as classes">
|
||||||
These are logically equivalent
|
These are logically equivalent
|
||||||
|
@ -140,7 +141,7 @@ Sample:
|
||||||
<div class="blue{this.isSelected() ? ' selected' : ''}">Using the class attribute</div>
|
<div class="blue{this.isSelected() ? ' selected' : ''}">Using the class attribute</div>
|
||||||
</div>
|
</div>
|
||||||
```
|
```
|
||||||
Complied:
|
###### Compiled:
|
||||||
```
|
```
|
||||||
define([
|
define([
|
||||||
'react',
|
'react',
|
||||||
|
@ -167,7 +168,7 @@ define([
|
||||||
## style
|
## style
|
||||||
In order to make it closer to html, we allow the settings of inline styles. In addition, this will take care of changing the styles from hyphen-style to camelCase style. If you'd like, you can still return an object from evaluation context. Please note that if you do it inline, you'll need to open single curly braces for the js context, and another for the object. Also, you'll need to use camelCase if using it that way
|
In order to make it closer to html, we allow the settings of inline styles. In addition, this will take care of changing the styles from hyphen-style to camelCase style. If you'd like, you can still return an object from evaluation context. Please note that if you do it inline, you'll need to open single curly braces for the js context, and another for the object. Also, you'll need to use camelCase if using it that way
|
||||||
|
|
||||||
Sample:
|
###### Sample:
|
||||||
```
|
```
|
||||||
<div>
|
<div>
|
||||||
These are really equivalent
|
These are really equivalent
|
||||||
|
@ -175,7 +176,7 @@ Sample:
|
||||||
<div style="{{'color': 'white', 'lineHeight': this.state.lineHeight + 'px'}}">Inline</div>
|
<div style="{{'color': 'white', 'lineHeight': this.state.lineHeight + 'px'}}">Inline</div>
|
||||||
</div>
|
</div>
|
||||||
```
|
```
|
||||||
Complied:
|
###### Compiled:
|
||||||
```
|
```
|
||||||
define([
|
define([
|
||||||
'react',
|
'react',
|
||||||
|
@ -201,11 +202,11 @@ define([
|
||||||
## event handlers
|
## event handlers
|
||||||
TODO: Section text
|
TODO: Section text
|
||||||
|
|
||||||
Sample:
|
###### Sample:
|
||||||
```
|
```
|
||||||
|
|
||||||
```
|
```
|
||||||
Complied:
|
###### Compiled:
|
||||||
```
|
```
|
||||||
|
|
||||||
```
|
```
|
||||||
|
@ -213,11 +214,11 @@ Complied:
|
||||||
## doctype rt, require dependencies, and calling other components
|
## doctype rt, require dependencies, and calling other components
|
||||||
TODO: Section text
|
TODO: Section text
|
||||||
|
|
||||||
Sample:
|
###### Sample:
|
||||||
```
|
```
|
||||||
|
|
||||||
```
|
```
|
||||||
Complied:
|
###### Compiled:
|
||||||
```
|
```
|
||||||
|
|
||||||
```
|
```
|
Loading…
Reference in New Issue