change template prefix to curly brackets

Closes #209

docs/api/index.md

@@ -40,13 +40,13 @@ TBD
 
 #### Template definition
 
-Inside an `.hsp` file, you can define a template using `#template` statement. A single `.hsp` can define multiple templates.
+Inside an `.hsp` file, you can define a template using `{template}` statement. A single `.hsp` can define multiple templates.
 
 ```cs
-#template tplname(arg1, arg2)
+{template tplname(arg1, arg2)}
   //your template code goes here
   <div>Hello world</div>
-#/template
+{/template}
 ```
 
 A template has the following properties:
@@ -75,7 +75,7 @@ This statement is a block statement.
 Note that as a kind of alternative, in some cases a ternary expression can be used instead of the statement.
 
 ```cs
-# template example(context)
+{template example(context)}
   Number is:
   {if context.number < 0}
     negative
@@ -85,7 +85,7 @@ Note that as a kind of alternative, in some cases a ternary expression can be us
     null
   {/if}
   &nbsp;({context.number === 0 ? 'null' : context.number}).
-# /template
+{/template}
 ```
 
 ---
@@ -99,13 +99,13 @@ This statement is a block statement.
 Note that the statement creates its own local environment containing the reference to the current value and possibly the one to the current index.
 
 ```cs
-# template example(array)
+{template example(array)}
   <ul>
   {foreach index, value in array}
     <li onclick="{process(value)}">{index}: {value}</li>
   {/foreach}
   </ul>
-# /template
+{/template}
 ```
 
 ---
@@ -156,9 +156,9 @@ It will forward all the given parameters, and add its own metadata with the foll
 * `column`: the column number in which the statement appears on the line
 
 ```cs
-# template example()
+{template example()}
   {log scope}
-# /template
+{/template}
 ```
 
 ---
@@ -181,7 +181,7 @@ The scope of the created variable is the container block in which the statement
 `{let}` statements __MUST__ appear at the beginning of the blocks in which they are used!
 
 ```hashspace
-# template example()
+{template example()}
   {let tpl = "Variable in template environment"}
 
   <div>
@@ -199,12 +199,12 @@ The scope of the created variable is the container block in which the statement
   {foreach value in container}
     {let foreach_ = "Variable in foreach environment"}
   {/foreach}
-# /template
+{/template}
 ```
 
 ---
 
-#### Component template definitions `#template mycpt using ctrl:MyController`
+#### Component template definitions `{template mycpt using ctrl:MyController}`
 
 Defines a component, that is a template tied to a specific _class_ to be used as controller.
 
@@ -225,7 +225,7 @@ The above means mainly two important things:
 * parameters of the template (equivalent of element attributes) are __passed by name__, not by position
 * it not only instantiates the template but also renders it automatically in a DOM element inserted exactly where the statement is used
 
-There is also an additional subtlety regarding the passing of the parameters. As said, they are passed by name, so if you use `<tplref arg1="..." />` for a template defined like this `# template(whatever, arg1)`, `arg1` will be properly passed, wherever it is defined in the parameters list. However the actual subtlety resides in the __first__ parameter of the function: if it doesn't match any attribute name, it is not left `undefined` as one could think. Instead, it refers to an object built from the attribute/value pairs. In our little example, `whatever` would refer to an object like this: `{arg1: "..."}`. This is implicitely due to the internal way hashspace is managing components instantiation (components are discussed later in this documentation).
+There is also an additional subtlety regarding the passing of the parameters. As said, they are passed by name, so if you use `<tplref arg1="..." />` for a template defined like this `{template(whatever, arg1)}`, `arg1` will be properly passed, wherever it is defined in the parameters list. However the actual subtlety resides in the __first__ parameter of the function: if it doesn't match any attribute name, it is not left `undefined` as one could think. Instead, it refers to an object built from the attribute/value pairs. In our little example, `whatever` would refer to an object like this: `{arg1: "..."}`. This is implicitely due to the internal way hashspace is managing components instantiation (components are discussed later in this documentation).
 
 __Reference__:
 
@@ -338,9 +338,9 @@ This means that instead of giving a piece of JavaScript code to be executed in t
 Event handlers have a particularity though: in your function call, you can pass the `event` object to your handler function. This `event` object is implicitly available in the context of your expression, but it is not automatically passed, so you need to explicitly pass it if you want to have it available in your function.
 
 ```cs
-# template example()
+{template example()}
   <span onclick="{handler(event)}">Click me</span>
-# /template
+{/template}
 
 function handler(event) {
   // ...
@@ -517,14 +517,14 @@ Hashspace natively supports different types of attributes:
   ```
 
   ```cs
-  #template mycpt using ctrl:MyCpt
+  {template mycpt using ctrl:MyCpt}
     <header>
       <#ctrl.header />
     </header>
     <section>
       <#ctrl.body />
     </section>
-  #/template
+  {/template}
   ```
 
   In terms of usage, it would be done with several different syntaxes:
@@ -673,13 +673,13 @@ var Controller = klass({
   }
 });
 
-# template example using controller:Controller
+{template example using controller:Controller}
   <div>
     <span></span>
   </div>
   Ignored text
   <hr />
-# /template
+{/template}
 ```
 
 ---

docs/playground/layout.hsp

@@ -1,7 +1,7 @@
 
 var splitter = require("./splitter.hsp");
 
-# export template mainLayout(data, playground)
+{export template mainLayout(data, playground)}
   <#sampleList data="{data}" playground="{playground}"/>
 
   <div class="{'hsp-sample', 'hsp-sample-full': data.navCollapsed}" onclick="{hideNavHover(event, data)}">
@@ -22,7 +22,7 @@ var splitter = require("./splitter.hsp");
       </div>
     </div>
   </div>
-# /template
+{/template}
 
 function splitterReleased(position, data, playground) {
   data.splitterPos = position + "px";
@@ -56,7 +56,7 @@ function hideNavHover(event, data) {
   }
 }
 
-# template sampleList(data, playground)
+{template sampleList(data, playground)}
   <div class="{'samples-list', 'samples-list-collapsed': data.navCollapsed}"
     onclick="{hideNavHover(event, data)}">
     <a href="" class="collapse" title="{data.navCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}" onclick="{collapseNav(event, data, playground)}"><span class="icon"></span></a>
@@ -79,9 +79,9 @@ function hideNavHover(event, data) {
       {/foreach}
     </div>
   </div>
-# /template
+{/template}
 
-# export template errorList(errors)
+{export template errorList(errors)}
     {if errors && errors.length}
         <div class="errorlist">
             <ul>
@@ -104,4 +104,4 @@ function hideNavHover(event, data) {
             </ul>
         </div>
     {/if}
-# /template
+{/template}

docs/playground/splitter.hsp

@@ -71,9 +71,9 @@ var SplitterCtrl = Class({
 });
 
 
-#template splitter using ctrl:SplitterCtrl
+{template splitter using ctrl:SplitterCtrl}
   <div class="splitter" onmousedown="{ctrl.onMouseDown(event)}"></div>
   <div class="{'splitter-proxy', 'splitter-proxy-hidden': !ctrl.active}"></div>
-#/template
+{/template}
 
 module.exports = splitter;

docs/samples/clickhandler/clickhandler.hsp

@@ -1,11 +1,11 @@
 var msg={text:""}, count=-1;
 
-# template message(msg)
+{template message(msg)}
     <div title="click me!" onclick="{changeMessage()}" onselectstart="return false">
         {if msg.isWarning}<div class="warning">WARNING:&nbsp;</div>{/if}
         {msg.text}
     </div>
-# /template
+{/template}
 
 function changeMessage() {
     count++;

docs/samples/clock/clock.hsp

@@ -42,7 +42,7 @@ var ClockController=klass({
 	}
 });
 
-# template clock using c:ClockController
+{template clock using c:ClockController}
 	// example from http://www.ractivejs.org/examples/clock/
 	<div class="square">
 		<svg viewBox="0 0 100 100">
@@ -67,13 +67,13 @@ var ClockController=klass({
 		</svg>
 		<div class="city">{c.cityName}</div>
 	</div>
-# /template
+{/template}
 
-# template demo
+{template demo}
 	<#clock city="SFO"/>
 	<#clock city="PAR"/>
 	<#clock city="TYO"/>
-# /template
+{/template}
 
 // display the template in the #output div
 demo().render("output");

docs/samples/component1/timer.hsp

@@ -18,15 +18,15 @@ var Timer=klass({
     }
 });
 
-# template timer using t:Timer
+{template timer using t:Timer}
     Elapsed time: {t.secondsElapsed}s 
-# /template
+{/template}
 
-# template test
+{template test}
   Sample showing two timer instances with different init values:<br/>
   <#timer/> <br/>
   <#timer initvalue="10"/>
-# /template
+{/template}
 
 // display the test template in the #output div
 test().render("output");

docs/samples/component2/nbrfield.hsp

@@ -70,23 +70,23 @@ function getNumber(s) {
 }
 
 // component template associated with the NbrField controller
-# export template nbrfield using c:NbrField
+{export template nbrfield using c:NbrField}
   <span class="nbrfield">
     <input type="text" model="{c.internalValue}" 
     class="{'nbrfield', 'error': !c.isValid}"/>
     <button onclick="{c.resetField()}">reset</button>
   </span>
-# /template
+{/template}
 
 // component usage
-# template test(d)
+{template test(d)}
   Component #1: <#nbrfield value="{d.value1}" min="-10" max="1000"/><br/>
   Value in the data model: <span class="textValue">{d.value1}</span> 
   (min:-10 / max:1000 / default:0)
   <hr/>
   Component #2: <#nbrfield value="{d.value2}"/><br/>
   Value in the data model: <span class="textValue">{d.value2}</span>
-# /template
+{/template}
 
 // display the template in the #output div
 test({value1:123}).render("output");

docs/samples/component3/pagination.hsp

@@ -43,7 +43,7 @@ var Pagination=klass({
     }
 });
 
-# template pagination using p:Pagination
+{template pagination using p:Pagination}
     <ul class="pagination">
         <li class="{'disabled':p.activepage===0}">
             <a onclick="{p.selectPage(p.activepage-1)}">Previous</a>
@@ -57,9 +57,9 @@ var Pagination=klass({
             <a onclick="{p.selectPage(p.activepage+1)}">Next</a>
         </li>
     </ul>
-# /template
+{/template}
 
-# template paginationTest(model)
+{template paginationTest(model)}
   <div class="section3">
     <label class="fieldlabel">Active page: </label><input type="number"  model="{model.active}"/><br/>
     <label class="fieldlabel">Collection size: </label><input type="number"  model="{model.collectionSize}"/><br/>
@@ -69,7 +69,7 @@ var Pagination=klass({
   <#pagination activepage="{model.active}" collectionsize="{model.collectionSize}" 
     pagesize="{model.pageSize}" onpageselect="{updateSelection(event.pageNumber)}"/>
 
-# /template
+{/template}
 
 var model = {
     active: 4,

docs/samples/conditions/conditions.hsp

@@ -1,7 +1,7 @@
 var klass=require("hsp/klass");
 
 // nt is an instance of NumberTester
-# template test(nt)
+{template test(nt)}
 	<div>
 		Number: <span class="textvalue">{nt.number}</span> &nbsp;
 	    {if nt.number==0}
@@ -21,7 +21,7 @@ var klass=require("hsp/klass");
 	    <a onclick="{nt.increment(1)}">Increment Number</a> - 
 	    <a onclick="{nt.increment(-1)}">Decrement Number</a>
     </div>
-# /template
+{/template}
 
 // klass is a little utility to create a JS object constructor 
 // from a simple JSON structure - main goals are to

docs/samples/cssclass/cssclass.hsp

@@ -1,4 +1,4 @@
-# template message(msg)
+{template message(msg)}
     // onselectstart: prevent double-click selection on a elements
     <div onselectstart="return false"> 
         <a onclick="{toggleUrgency()}">Change Urgency</a> - 
@@ -11,7 +11,7 @@
             Class value: "{'msg', 'urgent':msg.urgency, msg.category}"
         </div>
     </div>
-# /template
+{/template}
 
 var msg={
     text:"Hello World",

docs/samples/dynpath/dynpath.hsp

@@ -1,4 +1,4 @@
-# template grid(data)
+{template grid(data)}
     <div> 
         {foreach idx in data.rows}
             <div>
@@ -16,7 +16,7 @@
     <a onclick="{update()}">Update columns B&C</a>
     &nbsp;-&nbsp;
     <a onclick="{swapC()}">Show/Hide columns C</a>
-# /template
+{/template}
 
 // create dummy data
 var list=[], count=5;

docs/samples/dyntemplates/dyntemplates.hsp

@@ -1,19 +1,19 @@
-# template test(ctxt)
+{template test(ctxt)}
   <div><a onclick="{swapTemplate()}">Change template</a></div>
   <#ctxt.view ctxt="{ctxt}"/>
-# /template
+{/template}
 
-# template tplA(ctxt)
+{template tplA(ctxt)}
   <div class="msg">
     A: {ctxt.msg}
   </div>
-# /template
+{/template}
 
-# template tplB(ctxt)
+{template tplB(ctxt)}
   <div class="msg">
     B: {ctxt.msg2}
   </div>
-# /template
+{/template}
 
 var model={
     view: tplA,