diff --git a/README.md b/README.md index 884f589..cc0e12b 100644 --- a/README.md +++ b/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 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: ``` {this.state.linkText} ``` -Compiled: +###### Compiled: ``` define([ 'react', @@ -52,11 +52,12 @@ define([ ## 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 -Sample: + +###### Sample: ```
Success!
``` -Complied: +###### Compiled: ``` define([ 'react', @@ -72,11 +73,11 @@ define([ ## 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 -Sample: +###### Sample: ```
{myNumIndex}. myNum
``` -Complied: +###### Compiled: ``` define([ 'react', @@ -95,14 +96,14 @@ define([ ## 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. -Sample: +###### Sample: ```
{rptIndex}{separator} {val}
'rpt' exists here, but not 'separator' and 'val'
``` -Complied: +###### Compiled: ``` define([ '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 2. You cannot use class and rt-class on the same html element -Sample: +###### Sample: ```
These are logically equivalent @@ -140,7 +141,7 @@ Sample:
Using the class attribute
``` -Complied: +###### Compiled: ``` define([ 'react', @@ -167,7 +168,7 @@ define([ ## 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 -Sample: +###### Sample: ```
These are really equivalent @@ -175,7 +176,7 @@ Sample:
Inline
``` -Complied: +###### Compiled: ``` define([ 'react', @@ -201,11 +202,11 @@ define([ ## event handlers TODO: Section text -Sample: +###### Sample: ``` ``` -Complied: +###### Compiled: ``` ``` @@ -213,11 +214,11 @@ Complied: ## doctype rt, require dependencies, and calling other components TODO: Section text -Sample: +###### Sample: ``` ``` -Complied: +###### Compiled: ``` ``` \ No newline at end of file