diff --git a/README.md b/README.md index 252397d..da2c44b 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ Light weight templates for react. Reasons that we love it: * Easy syntax. Similar to HTML. All IDEs recognize this format ## How does it work -React templates compiles a *.rt file (react template - extended HTML format) into a javascript file. Currently, this file supports requirejs format, that will return a function. This function, when applied, will return a virtual react DOM (based on React.DOM elements and user custom components). A common use case would be that a React component would require a JS file generated by a template, and then call ``func.apply(this)``, causing the template to have the component as its context. +React templates compiles a *.rt file (react template - extended HTML format) into a javascript file. Currently, this file supports requirejs format, that will return a function. This function, when applied, will return a virtual react DOM (based on React.DOM elements and user custom components). A common use case would be that a React component would require a JS file generated by a template, and then call `func.apply(this)`, causing the template to have the component as its context. ###### Basic concepts for react templates: * Any valid HTML is a template (and comments) @@ -69,16 +69,61 @@ define([ }); ``` -## section -Section text +## 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: ``` - +
{myNumIndex}. myNum
``` Complied: ``` +define([ + 'react', + 'lodash' +], function (React, _) { + 'use strict'; + function repeatMyNum1(myNum, myNumIndex) { + return React.DOM.div({}, myNumIndex + '. myNum'); + } + return function () { + return _.map(this.getMyNumbers(), repeatMyNum1.bind(this)); + }; +}); +``` +## 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: +``` +
+
{rptIndex}{separator} {val}
+
'rpt' exists here, but not 'separator' and 'val'
+
+``` +Complied: +``` +define([ + 'react', + 'lodash' +], function (React, _) { + 'use strict'; + function scopeSeparatorVal1(rpt, rptIndex, separator, val) { + return React.DOM.div({}, rptIndex + separator + ' ' + val); + } + function repeatRpt2(rpt, rptIndex) { + return React.DOM.div({}, scopeSeparatorVal1.apply(this, [ + rpt, + rptIndex, + ')', + rpt.val + ]), React.DOM.div({}, '\'rpt\' exists here, but not \'separator\' and \'val\'')); + } + return function () { + return _.map(array, repeatRpt2.bind(this)); + }; +}); ``` ## section