change #model into model

Closes #73

hsp/rt/eltnode.js

@@ -97,14 +97,22 @@ var EltNode = klass({
                         nodeName = this.atts[i].value;
                     }
                 }
-                try {
-                  nd = doc.createElement('<' + this.tag + (nodeType?' type=' + nodeType : '') + (nodeName?' name=' + nodeName : '') + ' >');
-                }
-                catch (e) {
+                if (nodeType || nodeName) {
+                    // we have to use a special creation mode as IE doesn't support dynamic type and name change
+                    try {
+                      nd = doc.createElement('<' + this.tag + (nodeType?' type=' + nodeType : '') + (nodeName?' name=' + nodeName : '') + ' >');
+                    } catch (ex) {
+                        nd = doc.createElement(this.tag);
+                        if (nodeType) {
+                            nd.type = nodeType;
+                        }
+                        if (nodeName) {
+                            nd.name = nodeName;
+                        }
+                    }
+                } else {
                     nd = doc.createElement(this.tag);
-                    if (nodeType) nd.type = nodeType;
-                    if (nodeName) nd.name = nodeName;
-                 }
+                }
             }
             else {
                 nd = doc.createElement(this.tag);
@@ -219,7 +227,7 @@ var EltNode = klass({
         if (atts) {
             for (var i = 0, sz = this.atts.length; sz > i; i++) {
                 att = atts[i];
-                if (this.isInput && !this.inputModelExpIdx && (att.name === "value" || att.name === "#model")) {
+                if (this.isInput && !this.inputModelExpIdx && (att.name === "value" || att.name === "model")) {
                     if (att.textcfg && att.textcfg.length === 2 && att.textcfg[0] === '') {
                         if (!modelRefs) {
                             modelRefs = [];
@@ -228,12 +236,9 @@ var EltNode = klass({
                     }
                 }
                 nm = att.name;
-                if (nm.match(/^#/)) {
+                if (nm === "model") {
                     // this is an hashspace extension attribute
-                    if (nm === "#model") {
-                        continue;
-                    }
-
+                    continue;
                 } else if (nm === "class") {
                     // issue on IE8 with the class attribute?
                     if (this.nodeNS) {
@@ -266,7 +271,7 @@ var EltNode = klass({
 
         if (modelRefs) {
             // set the inputModelExpIdx property that reference the expression index to use for the model binding
-            var ref = modelRefs["#model"];
+            var ref = modelRefs["model"];
             if (!ref) {
                 ref = modelRefs["value"];
             }

public/samples/component2/nbrfield.hsp

@@ -73,7 +73,7 @@ function getNumber(s) {
 // component template associated with the NbrField controller
 # export template nbrfield using c:NbrField
   <span class="nbrfield">
-    <input type="text" #model="{c.internalValue}" 
+    <input type="text" model="{c.internalValue}" 
     class="{'nbrfield', 'error': !c.isValid}"/>
     <button onclick="{c.resetField()}">reset</button>
   </span>

public/samples/component3/pagination.hsp

@@ -61,9 +61,9 @@ var Pagination=klass({
 
 # 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/>
-    <label class="fieldlabel">Page size: </label><input type="number"  #model="{model.pageSize}"/><br/>
+    <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/>
+    <label class="fieldlabel">Page size: </label><input type="number"  model="{model.pageSize}"/><br/>
     Last page selection  <i> - from event</i>: <span class="textValue">{model.lastSelectedPage}</span>
   </div>
   <#pagination activepage="{model.active}" collectionsize="{model.collectionSize}" 

public/samples/inputsample/description.md

@@ -1,12 +1,12 @@
 
 Hashspace automatically listens to the main change events of its input elements (*click*, *keypress* and *keyup*) in order to transparently synchronize the input values with the data referenced through the value expression.
 
-The following example shows the same value referenced by two text fields and a read-only span:
+The following example shows the same value referenced by two several text fields and a read-only span:
 
 [#output]
 
 For the time being, only simple path expressions are supported to reference input values in a bi-directional way.
 
-You can note that *radio* inputs have to use a **#model** pseudo-attribute in order to be bind their selection to the data-model. All radio buttons referencing the same model property will automatically belong the same group - and they don't need to have the same *name* attribute as in classical HTML forms.
+You can note that *radio* inputs have to use a **model** attribute in order to be bind their selection to the data-model. All radio buttons referencing the same model property will automatically belong the same group - and they don't need to have the same *name* attribute as in classical HTML forms.
 
-For the sake of consistency the **#model** attribute can also be used on all input types, even if the *value* attribute can be used as well, as shown in the previous example.
+For the sake of consistency the **model** attribute can also be used on all input types, even if the *value* attribute can be used as well, as shown in the previous example.

public/samples/inputsample/inputsample.hsp

@@ -2,32 +2,36 @@
     <div class="info2">All the following inputs are synchronized:</div>
     <div class="section">
         Comment #1: <input type="text" value="{data.comment}"/><br/>
-        Comment #2: <input type="text" #model="{data.comment}"/><br/>
-        Comment #3: <span class="textValue">{data.comment}</span><br/>
-        Comment #4: <input type="{data.comment}" value="{data.comment}"/><br/>
+        Comment #2: <input type="text" model="{data.comment}"/><br/>
+        Comment #3: <span class="textValue">{data.comment}</span>
     </div>
     <div class="section">
         <input id="cb1" type="checkbox" value="{data.isChecked}"/>
         <label for="cb1">Check me!</label> -
 
-        <input id="cb2" type="checkbox" #model="{data.isChecked}"/>
+        <input id="cb2" type="checkbox" model="{data.isChecked}"/>
         <label for="cb2">Check me (2)!</label> -
         Checked: <span class="textValue">{data.isChecked}</span>
     </div>
     <div class="section">
-        <input id="rb1" type="radio" #model="{data.selection}" value="A"/>
+        <input id="rb1" type="radio" model="{data.selection}" value="A"/>
         <label for="rb1">Select A</label> -
 
-        <input id="rb2" type="radio" #model="{data.selection}" value="B"/>
+        <input id="rb2" type="radio" model="{data.selection}" value="B"/>
         <label for="rb2">Select B</label> -
 
-        <input id="rb3" type="radio" #model="{data.selection}" value="C"/>
+        <input id="rb3" type="radio" model="{data.selection}" value="C"/>
         <label for="rb3">Select C</label> -
         Selection in model:<span class="textValue">{data.selection}</span>
     </div>
+    <div class="section">
+        Input with dynamic type: 
+        <input type="{data.dtype}" value="{data.comment}" style="width:100px"/> -
+        change type: <input type="text" value="{data.dtype}" style="width:100px"/>
+    </div>
 # /template
 
-var d={comment:"edit me!", isChecked:false, selection:"B"}
+var d={comment:"edit me!", isChecked:false, selection:"B", dtype:"text"}
 
 // display the template in the #output div
 inputSample(d).render("output");

public/test/compiler/samples/component3.txt

@@ -1,7 +1,7 @@
 ##### Template:
 
 # template nbrfield using c:lib.NbrField
-  <input type="text" #model="{c.fieldValue}" class="{'nbrfield','error': c.invalidValue, 'mandatory': c.attributes.mandatory}"/>
+  <input type="text" model="{c.fieldValue}" class="{'nbrfield','error': c.invalidValue, 'mandatory': c.attributes.mandatory}"/>
   <input type="button" value="..." onclick="{c.resetField()}"/>
 # /template
 
@@ -15,7 +15,7 @@
 nbrfield=[
   n.elt("input",
     {e1:[1,2,"c","fieldValue"],e2:[6,function(a0,a1) {return ["nbrfield",((a0)? ''+"error":''),((a1)? ''+"mandatory":'')].join(' ');},3,4],e3:[1,2,"c","invalidValue"],e4:[1,3,"c","attributes","mandatory"]},
-    {"type":"text","#model":["",1],"class":["",2]},
+    {"type":"text","model":["",1],"class":["",2]},
     0
   ),
   n.elt("input",

public/test/rt/cptwrapper.spec.hsp

@@ -114,7 +114,7 @@ lib.NbrField = klass({
 
 
 # template nbrfield using c:lib.NbrField
-  <input type="text" #model="{c.internalValue}" class="{'nbrfield','error': c.invalidValue, 'mandatory': c.mandatory}"/>
+  <input type="text" model="{c.internalValue}" class="{'nbrfield','error': c.invalidValue, 'mandatory': c.mandatory}"/>
   <input type="button" value="..." onclick="{c.resetField()}"/>
 # /template
 

public/test/rt/input.spec.hsp

@@ -22,22 +22,22 @@ var hsp=require("hsp/rt"),
     <div class="info section">All the following inputs are synchronized:</div>
     <div class="section">
         Comment #1: <input type="text" value="{data.comment}"/><br/>
-        Comment #2: <input type="text" #model="{data.comment}"/><br/>
+        Comment #2: <input type="text" model="{data.comment}"/><br/>
         Comment #3: <span class="inputText">{data.comment}</span><br/>
     </div>
     <div class="section">
         <input id="cb1" type="checkbox" value="{data.isChecked}"/>
         <label for="cb1">Check me!</label> -
-        <input id="cb2" type="checkbox" #model="{data.isChecked}"/>
+        <input id="cb2" type="checkbox" model="{data.isChecked}"/>
         <label for="cb2">Check me (2)!</label> -
         Checked: <span class="textValue">{data.isChecked}</span>
     </div>
     <div class="section">
-        <input id="rb1" type="radio" #model="{data.selection}" value="A"/>
+        <input id="rb1" type="radio" model="{data.selection}" value="A"/>
         <label for="rb1">Select A</label> -
-        <input id="rb2" type="radio" #model="{data.selection}" value="B"/>
+        <input id="rb2" type="radio" model="{data.selection}" value="B"/>
         <label for="rb2">Select B</label> -
-        <input id="rb3" type="radio" #model="{data.selection}" value="C"/>
+        <input id="rb3" type="radio" model="{data.selection}" value="C"/>
         <label for="rb3">Select C</label> -
         Selection in model: <span class="textValue">{data.selection}</span>
     </div>
@@ -74,7 +74,7 @@ describe("Input Elements", function () {
         expect(input2.node.value).to.equal(v3);
         expect(d.comment).to.equal(v3);
 
-        // change the value from input2 (#model attribute)
+        // change the value from input2 (model attribute)
         var v4 = "blah";
         input2.node.value = v4;
         fireEvent("click",input2.node); // to simulate change
@@ -116,7 +116,7 @@ describe("Input Elements", function () {
             expect(d.isChecked).to.equal(true);
         }
 
-        // change from cb2 (#model reference)
+        // change from cb2 (model reference)
         fireEvent("click",cb2.node);
         expect(cb1.node.checked).to.equal(false);
         expect(cb2.node.checked).to.equal(false);