Merge 565bcba into fbcc305

ariatemplates · Oct 20, 2014 · 30e93d5 · 30e93d5
2 parents fbcc305 + 565bcba
commit 30e93d5
Show file tree

Hide file tree

Showing 224 changed files with 1,085 additions and 430 deletions.
diff --git a/build/grunt/docs.js b/build/grunt/docs.js
@@ -94,7 +94,7 @@ module.exports = function(grunt) {
     files: [
       {
         expand: true,
-        src: [ GH_PAGES_PATH + 'playground/*-all.js' ]
+        src: [ GH_PAGES_PATH + 'playground/*-all.js' ] // make it [] if you want to debug not minified files
       }
     ]
   };

diff --git a/docs/playground/layout.hsp b/docs/playground/layout.hsp
@@ -31,7 +31,7 @@ var DescriptionCtrl = Class({
 });
 </script>
 
-<template desc using ctrl:DescriptionCtrl>
+<template id="desc" ctrl="DescriptionCtrl as ctrl">
     <div id="description">
         {if ctrl.sample}
             <div class="before"></div>
@@ -45,7 +45,7 @@ var DescriptionCtrl = Class({
 </template>
 
 
-<export template mainLayout(data, playground)>
+<template export id="mainLayout" args="data, playground">
     <#sampleList data="{data}" playground="{playground}"/>
 
     <div class="hsp-sample {{'hsp-sample-full': data.navCollapsed}}" onclick="{hideNavHover($event, data)}">
@@ -105,7 +105,7 @@ function hideNavHover(event, data) {
 }
 </script>
 
-<template sampleList(data, playground)>
+<template id="sampleList" args="data, playground">
     <div class="samples-list {{'samples-list-collapsed': data.navCollapsed}}"
         onclick="{hideNavHover($event, data)}">
 
@@ -133,13 +133,21 @@ function hideNavHover(event, data) {
     </div>
 </template>
 
-<export template errorList(errors)>
+<template export id="errorList" args="errors">
     {if errors && errors.length}
         <div class="errorlist">
             <ul>
                 {foreach error in errors}
                 <li>
-                    <div class="{error.type}"> {error.message} </div>
+                    {if error.messages}
+                        <div class="{error.type}">
+                        {foreach msg in error.messages}
+                            {msg}<br>
+                        {/foreach}
+                        </div>
+                    {else if error.message}
+                        <div class="{error.type}"> {error.message} </div>
+                    {/if}
                     {if error.line || error.file}
                         <div class="ctxt">
                             [{error.file}]

diff --git a/docs/playground/splitter.hsp b/docs/playground/splitter.hsp
@@ -74,7 +74,7 @@ var SplitterCtrl = Class({
 });
 </script>
 
-<template splitter using controller:SplitterCtrl>
+<template id="splitter" ctrl="SplitterCtrl as controller">
     <div class="splitter" onmousedown="{controller.onMouseDown($event)}"></div>
     <div class="splitter-proxy {{'splitter-proxy-hidden': !controller.active}}"></div>
 </template>

diff --git a/docs/samples/clickhandler/clickhandler.hsp b/docs/samples/clickhandler/clickhandler.hsp
@@ -2,7 +2,7 @@
 var msg={text:""}, count=-1;
 </script>
 
-<template message(msg)>
+<template id="message" args="msg">
     <div title="click me!" onclick="{changeMessage()}" onselectstart="return false">
         {if msg.isWarning}<span class="warning">WARNING:&nbsp;</span>{/if}
         <span>{msg.text}</span>

diff --git a/docs/samples/clock/clock.hsp b/docs/samples/clock/clock.hsp
@@ -44,7 +44,7 @@ var ClockController=klass({
 });
 </script>
 
-<template clock using c:ClockController>
+<template id="clock" ctrl="ClockController as c">
 	// example from http://www.ractivejs.org/examples/clock/
 	<div class="square">
 		<svg viewBox="0 0 100 100">
@@ -71,7 +71,7 @@ var ClockController=klass({
 	</div>
 </template>
 
-<template demo>
+<template id="demo">
 	<#clock city="SFO"/>
 	<#clock city="PAR"/>
 	<#clock city="TYO"/>

diff --git a/docs/samples/component1/timer.hsp b/docs/samples/component1/timer.hsp
@@ -19,11 +19,11 @@ var Timer=klass({
 });
 </script>
 
-<template timer using t:Timer>
+<template id="timer" ctrl="Timer as t">
     Elapsed time: {t.secondsElapsed}s
 </template>
 
-<template test>
+<template id="test">
   Sample showing two timer instances with different init values:<br/>
   <#timer/> <br/>
   <#timer initvalue="10"/>

diff --git a/docs/samples/component2/nbrfield.hsp b/docs/samples/component2/nbrfield.hsp
@@ -72,7 +72,7 @@ function getNumber(s) {
 </script>
 
 <!-- component template associated with the NbrField controller -->
-<export template nbrfield using c:NbrField>
+<template export id="nbrfield" ctrl="NbrField as c">
   <span class="nbrfield">
     <input type="text" model="{c.internalValue}"
     class="nbrfield {{'error': !c.isValid}}"/>
@@ -81,7 +81,7 @@ function getNumber(s) {
 </template>
 
 <!-- component usage -->
-<template test(d)>
+<template id="test" args="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)

diff --git a/docs/samples/component3/pagination.hsp b/docs/samples/component3/pagination.hsp
@@ -45,7 +45,7 @@ var Pagination=klass({
 });
 </script>
 
-<template pagination using p:Pagination>
+<template id="pagination" ctrl="Pagination as p">
     <ul class="pagination">
         <li class="{{'disabled':p.activepage===0}}">
             <a href="javascript:void(0)" onclick="{p.selectPage(p.activepage-1)}">Previous</a>
@@ -61,7 +61,7 @@ var Pagination=klass({
     </ul>
 </template>
 
-<template paginationTest(model)>
+<template id="paginationTest" args="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/>

diff --git a/docs/samples/conditions/conditions.hsp b/docs/samples/conditions/conditions.hsp
@@ -3,7 +3,7 @@ var klass=require("hsp/klass");
 </script>
 
 <!-- nt is an instance of NumberTester -->
-<template test(nt)>
+<template id="test" args="nt">
     <div>
         Number: <span class="textvalue">{nt.number}</span>
         {if nt.number==0}

diff --git a/docs/samples/cssclass/cssclass.hsp b/docs/samples/cssclass/cssclass.hsp
@@ -1,4 +1,4 @@
-<template message(msg)>
+<template id="message" args="msg">
     // onselectstart: prevent double-click selection on a elements
     <div onselectstart="return false">
         <a href="javascript:void(0)" onclick="{toggleUrgency()}">Change Urgency</a> -

diff --git a/docs/samples/dynpath/dynpath.hsp b/docs/samples/dynpath/dynpath.hsp
@@ -1,4 +1,4 @@
-<template grid(data)>
+<template id="grid" args="data">
     <div>
         {foreach idx in data.rows}
             <div>

diff --git a/docs/samples/dyntemplates/dyntemplates.hsp b/docs/samples/dyntemplates/dyntemplates.hsp
@@ -1,15 +1,15 @@
-<template test(ctxt)>
+<template id="test" args="ctxt">
   <div><a href="javascript:void(0)" onclick="{swapTemplate()}">Change template</a></div>
   <#ctxt.view ctxt="{ctxt}"/>
 </template>
 
-<template tplA(ctxt)>
+<template id="tplA" args="ctxt">
   <div class="msg">
     A: {ctxt.msg}
   </div>
 </template>
 
-<template tplB(ctxt)>
+<template id="tplB" args="ctxt">
   <div class="msg">
     B: {ctxt.msg2}
   </div>

diff --git a/docs/samples/gestures/gestures.hsp b/docs/samples/gestures/gestures.hsp
@@ -2,7 +2,7 @@
 require('hsp/gestures/index').register();
 </script>
 
-<template gestures(msgList)>
+<template id="gestures" args="msgList">
     <div class="touchboard" style="height:200px; background: #27AAFC;text-align:center;"
     	ontap="{addMsg($event)}" ontapstart="{addMsg($event)}" ontapcancel="{addMsg($event)}"
         onlongpress="{addMsg($event)}" onlongpressstart="{addMsg($event)}" onlongpresscancel="{addMsg($event)}"

diff --git a/docs/samples/global/global.hsp b/docs/samples/global/global.hsp
@@ -2,7 +2,7 @@
 var hsp=require("hsp/rt");
 </script>
 
-<template item(text,value)>
+<template id="item" args="text,value">
     {if value}
         <div>
             <div class="label">{text}</div>
@@ -16,7 +16,7 @@ hsp.global.label=item;
 hsp.global.ln={personDetails:"Person details"};
 </script>
 
-<template test(person)>
+<template id="test" args="person">
     <div class="global" title="{ln.personDetails}">
         <#label text="First Name: " value="{person.firstName}"/>
         <#label text="Last Name: "  value="{person.lastName}"/>

diff --git a/docs/samples/helloworld/hello.hsp b/docs/samples/helloworld/hello.hsp
@@ -2,7 +2,7 @@
 edit me!
 -->
 
-<template hello(name)>
+<template id="hello" args="name">
     <div class="msg">
         Hello {name}!
     </div>

diff --git a/docs/samples/inputonupdate/inputonupdate.hsp b/docs/samples/inputonupdate/inputonupdate.hsp
@@ -1,4 +1,4 @@
-<template inputOnupdate(data)>
+<template id="inputOnupdate" args="data">
     <div class="info2">Input field with a standard timer of 500ms:</div>
     <div class="section">
         <input type="text" model="{data.comment}" onupdate="{data.updateHandler($event)}"/><br/>

diff --git a/docs/samples/inputsample/inputsample.hsp b/docs/samples/inputsample/inputsample.hsp
@@ -1,4 +1,4 @@
-<template inputSample(data)>
+<template id="inputSample" args="data">
     <div class="info2">All the following inputs are synchronized:</div>
     <div class="section">
         Comment #1: <input type="text" value="{data.comment}"/><br/>

diff --git a/docs/samples/let/let.hsp b/docs/samples/let/let.hsp
@@ -1,4 +1,4 @@
-<template test(m)>
+<template id="test" args="m">
   {let p1=m.part1, m21=m.part2.part21.msg+"!"}
   <div>
     {let p11=p1.part11}

diff --git a/docs/samples/list1/list.hsp b/docs/samples/list1/list.hsp
@@ -16,7 +16,7 @@ var ListController = klass({
 </script>
 
 <!-- simple list template -->
-<template list using lc:ListController>
+<template id="list" ctrl="ListController as lc">
   // content is the list of attribute sub-elements
   <div class="list {lc.class}">
     {if lc.head}
@@ -39,7 +39,7 @@ var ListController = klass({
 </template>
 
 <!-- test template -->
-<template test(d)>
+<template id="test" args="d">
   <#list head="Static list" class="listcpt">
     <@option>First {d.itemName}</@option>
     <@option>Second {d.itemName}</@option>

diff --git a/docs/samples/list2/list.hsp b/docs/samples/list2/list.hsp
@@ -40,7 +40,7 @@ var ListCtrl = klass({
 <script>
 // simple list template
 </script>
-<template list using lc:ListCtrl>
+<template id="list" ctrl="ListCtrl as lc">
   // content is the list of attribute sub-elements
   <div class="list {lc.class}">
     {if lc.head}
@@ -65,7 +65,7 @@ var ListCtrl = klass({
 </template>
 
 <!-- test template -->
-<template test(d)>
+<template id="test" args="d">
   Click on an item to select it:
 
   <#list head="Static list" class="listcpt" onselect="{showSelection($event.value)}">

diff --git a/docs/samples/listsorting/list.hsp b/docs/samples/listsorting/list.hsp
@@ -1,4 +1,4 @@
-<template list(persons)>
+<template id="list" args="persons">
     <div onselectstart="return false">
         <div class="msg">
             <span class="info">

diff --git a/docs/samples/listupdate/list.hsp b/docs/samples/listupdate/list.hsp
@@ -1,4 +1,4 @@
-<template list(persons)>
+<template id="list" args="persons">
     <div> 
         <div class="msg">
             <a href="javascript:void(0)" onclick="{addElement()}">Add element</a> -

diff --git a/docs/samples/logs/logs.hsp b/docs/samples/logs/logs.hsp
@@ -2,7 +2,7 @@
 var log=require("hsp/rt/log");
 </script>
 
-<template test(cities, logs)>
+<template id="test" args="cities, logs">
   {log "top-level:",$scope}
   <a href="javascript:void(0)" onclick="{increaseList()}">Increase list</a> -
   <a href="javascript:void(0)" onclick="{decreaseList()}">Decrease list</a> -

diff --git a/docs/samples/modifiers/modifiers.hsp b/docs/samples/modifiers/modifiers.hsp
@@ -39,7 +39,7 @@ var Sorter=klass({
 })
 </script>
 
-<template sample(d)>
+<template id="sample" args="d">
     <div class="section2">
         Message in capital letters:
         <span class="textvalue">{d.msg|changeCase:"upper"}</span><br/>

diff --git a/docs/samples/panel/panel.hsp b/docs/samples/panel/panel.hsp
@@ -10,7 +10,7 @@ var PanelController = klass({
 </script>
 
 <!-- sample panel template -->
-<template panel using c:PanelController>
+<template id="panel" ctrl="PanelController as c">
   <div class="panel">
     {if c.head}
       <div class="head"> <#c.head/> </div>
@@ -21,7 +21,7 @@ var PanelController = klass({
   </div>
 </template>
 
-<template test(m)>
+<template id="test" args="m">
   <#panel body="Panel A (headless): {m.text}"/>
 
   <#panel head="Panel B ({m.text}!)">

diff --git a/docs/samples/selectsample/selectsample.hsp b/docs/samples/selectsample/selectsample.hsp
@@ -1,4 +1,4 @@
-<template selectSample(data)>
+<template id="selectSample" args="data">
     <div class="info2">The following select and its options are synchronized:</div>
     <div class="section">
         Select with bound value:

diff --git a/docs/samples/simplelist/simplelist.hsp b/docs/samples/simplelist/simplelist.hsp
@@ -1,4 +1,4 @@
-<template people(d)>
+<template id="people" args="d">
     <div class="msg">Click on a person to see more details:</div>
     <ul class="noTextSelection">
     {foreach p in d.people}

diff --git a/docs/samples/subtemplates/subtemplates.hsp b/docs/samples/subtemplates/subtemplates.hsp
@@ -1,5 +1,5 @@
 
-<export template personList(persons)>
+<template export id="personList" args="persons">
     <div class="subtemplates">
         {foreach p in persons}
             <#personDescription person="{p}"/>
@@ -9,14 +9,14 @@
     </div>
 </template>
 
-<export template personDescription(person)>
+<template export id="personDescription" args="person">
     <div class="person">
         <#item label="First Name: " value="{person.firstName}"/>
         <#item label="Last Name: " value="{person.lastName}"/>
     </div>
 </template>
 
-<template item(label,value)>
+<template id="item" args="label,value">
     {if value}
         <div>
             <div class="label">{label}</div>

diff --git a/docs/samples/tabbar/tabbar.hsp b/docs/samples/tabbar/tabbar.hsp
@@ -45,7 +45,7 @@ var TabBarCtrl = klass({
 });
 </script>
 
-<template tabbar using ctrl:TabBarCtrl>
+<template id="tabbar" ctrl="TabBarCtrl as ctrl">
   <div class="x-tabbar">
     <nav class="x-tabs">
         {foreach idx, tab in ctrl.$content}
@@ -69,7 +69,7 @@ var TabBarCtrl = klass({
   </div>
 </template>
 
-<template test>
+<template id="test">
   {let showSubTabs=false, selection1=0, selection2=0}
   <#tabbar selection="{selection1}">
     <@tab label="Tab A">

diff --git a/docs/samples/textarea/textarea.hsp b/docs/samples/textarea/textarea.hsp
@@ -1,4 +1,4 @@
-<template sample(data)>
+<template id="sample" args="data">
     <div class="info2">The following textarea elements are synchronized:</div>
     <div class="section">
         <div>Text #1:</div>

diff --git a/docs/samples/thirdpartycpts/chart.hsp b/docs/samples/thirdpartycpts/chart.hsp
@@ -42,11 +42,11 @@ var ChartCpt=klass({
 });
 </script>
 
-<template chart using c:ChartCpt>
+<template id="chart" ctrl="ChartCpt as c">
   <canvas width="{c.width}" height="{c.height}"></canvas>
 </template>
 
-<template test(data)>
+<template id="test" args="data">
   {let datasets=(data.ds=="d1")? d1 : d2}
   <#chart width="380" height="220" type="{data.type}" labels="{labels}" datasets="{datasets}"/>
   <div style="padding:15 0 0 30">