From 1f982c7ccdb51f17137b7323eb63d94dacbc7ab5 Mon Sep 17 00:00:00 2001 From: Bertrand Laporte Date: Sun, 23 Feb 2014 14:36:06 +0100 Subject: [PATCH] change #model into model Closes #73 --- hsp/rt/eltnode.js | 33 ++++++++++++--------- public/samples/component2/nbrfield.hsp | 2 +- public/samples/component3/pagination.hsp | 6 ++-- public/samples/inputsample/description.md | 6 ++-- public/samples/inputsample/inputsample.hsp | 20 ++++++++----- public/test/compiler/samples/component3.txt | 4 +-- public/test/rt/cptwrapper.spec.hsp | 2 +- public/test/rt/input.spec.hsp | 14 ++++----- 8 files changed, 48 insertions(+), 39 deletions(-) diff --git a/hsp/rt/eltnode.js b/hsp/rt/eltnode.js index 8436c73..c3f35c9 100644 --- a/hsp/rt/eltnode.js +++ b/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"]; } diff --git a/public/samples/component2/nbrfield.hsp b/public/samples/component2/nbrfield.hsp index adfc8ec..464331b 100644 --- a/public/samples/component2/nbrfield.hsp +++ b/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 - diff --git a/public/samples/component3/pagination.hsp b/public/samples/component3/pagination.hsp index 7b5d59c..9e039c9 100644 --- a/public/samples/component3/pagination.hsp +++ b/public/samples/component3/pagination.hsp @@ -61,9 +61,9 @@ var Pagination=klass({ # template paginationTest(model)
-
-
-
+
+
+
Last page selection - from event: {model.lastSelectedPage}
<#pagination activepage="{model.active}" collectionsize="{model.collectionSize}" diff --git a/public/samples/inputsample/description.md b/public/samples/inputsample/description.md index 03d0a65..f00ae50 100644 --- a/public/samples/inputsample/description.md +++ b/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. diff --git a/public/samples/inputsample/inputsample.hsp b/public/samples/inputsample/inputsample.hsp index 9ba5339..45e7702 100644 --- a/public/samples/inputsample/inputsample.hsp +++ b/public/samples/inputsample/inputsample.hsp @@ -2,32 +2,36 @@
All the following inputs are synchronized:
Comment #1:
- Comment #2:
- Comment #3: {data.comment}
- Comment #4:
+ Comment #2:
+ Comment #3: {data.comment}
- - + - Checked: {data.isChecked}
- + - - + - - + - Selection in model:{data.selection}
+
+ Input with dynamic type: + - + change type: +
# /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"); diff --git a/public/test/compiler/samples/component3.txt b/public/test/compiler/samples/component3.txt index aa78a7e..bb12e64 100644 --- a/public/test/compiler/samples/component3.txt +++ b/public/test/compiler/samples/component3.txt @@ -1,7 +1,7 @@ ##### Template: # template nbrfield using c:lib.NbrField - + # /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", diff --git a/public/test/rt/cptwrapper.spec.hsp b/public/test/rt/cptwrapper.spec.hsp index d3b4dc9..d953df6 100644 --- a/public/test/rt/cptwrapper.spec.hsp +++ b/public/test/rt/cptwrapper.spec.hsp @@ -114,7 +114,7 @@ lib.NbrField = klass({ # template nbrfield using c:lib.NbrField - + # /template diff --git a/public/test/rt/input.spec.hsp b/public/test/rt/input.spec.hsp index 2da14dd..48dfb02 100644 --- a/public/test/rt/input.spec.hsp +++ b/public/test/rt/input.spec.hsp @@ -22,22 +22,22 @@ var hsp=require("hsp/rt"),
All the following inputs are synchronized:
Comment #1:
- Comment #2:
+ Comment #2:
Comment #3: {data.comment}
- - + - Checked: {data.isChecked}
- + - - + - - + - Selection in model: {data.selection}
@@ -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);