From 286a5d8f059e356abde2bdb02cc7981cc09094e4 Mon Sep 17 00:00:00 2001
From: amitk <amitk@wix.com>
Date: Sun, 16 Nov 2014 01:43:59 +0200
Subject: [PATCH] More docs

---
 README.md | 92 ++++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 87 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 34834f6..884f589 100644
--- a/README.md
+++ b/README.md
@@ -8,10 +8,8 @@ Light weight templates for react. Reasons that we love it:
 * Declerative coding for presentation. HTML that you write and inspect look similar
 * Easy syntax. Similar to HTML. All IDEs recognize this format
 
-[TOC]
-
 ## 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 file - 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)
@@ -128,8 +126,92 @@ define([
 });
 ```
 
-## section
-Section text
+## rt-class
+In order to reduce the boiler-plate code when programatically setting class names, you can use the rt-class directive. It expectes to get a JSON object with keys as class names, and a value of true or false as the value. If the value is true, the class name will be included. Please note the following:
+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:
+```
+<div rt-scope="{blue: true, selected: this.isSelected()} as classes">
+    These are logically equivalent
+    <div rt-class="classes">Reference</div>
+    <div rt-class="{blue: true, selected: this.isSelected()}">Inline</div>
+    <div class="blue{this.isSelected() ? ' selected' : ''}">Using the class attribute</div>
+</div>
+```
+Complied:
+```
+define([
+    'react',
+    'lodash'
+], function (React, _) {
+    'use strict';
+    function scopeClasses1(classes) {
+        return React.DOM.div({}, 'These are logically equivalent', React.DOM.div({ 'className': React.addons.classSet(classes) }, 'Reference'), React.DOM.div({
+            'className': React.addons.classSet({
+                blue: true,
+                selected: this.isSelected()
+            })
+        }, 'Inline'), React.DOM.div({ 'className': 'blue' + this.isSelected() ? ' selected' : '' }, 'Using the class attribute'));
+    }
+    return function () {
+        return scopeClasses1.apply(this, [{
+                blue: true,
+                selected: this.isSelected()
+            }]);
+    };
+});
+```
+
+## 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:
+```
+<div>
+    These are really equivalent
+    <div style="color:white; line-height:{this.state.lineHeight}px">Inline</div>
+    <div style="{{'color': 'white', 'lineHeight': this.state.lineHeight + 'px'}}">Inline</div>
+</div>
+```
+Complied:
+```
+define([
+    'react',
+    'lodash'
+], function (React, _) {
+    'use strict';
+    return function () {
+        return React.DOM.div({}, 'These are really equivalent', React.DOM.div({
+            'style': {
+                color: 'white',
+                lineHeight: this.state.lineHeight + 'px'
+            }
+        }, 'Inline'), React.DOM.div({
+            'style': {
+                'color': 'white',
+                'lineHeight': this.state.lineHeight + 'px'
+            }
+        }, 'Inline'));
+    };
+});
+```
+
+## event handlers
+TODO: Section text
+
+Sample:
+```
+
+```
+Complied:
+```
+
+```
+
+## doctype rt, require dependencies, and calling other components
+TODO: Section text
 
 Sample:
 ```