[Sandbox-commits] r720 - in funjs/public_html: . funjs

26 Jun 2014

Author: jruchaud
Date: 2014-06-26 14:36:48 +0200 (Thu, 26 Jun 2014)
New Revision: 720

Url: http://forge.nuiton.org/projects/sandbox/repository/revisions/720

Log:
Try link the model ant the view


Modified:
   funjs/public_html/funjs/HtmlUtils.js
   funjs/public_html/funjs/TemplateEngine.js
   funjs/public_html/index.html

Modified: funjs/public_html/funjs/HtmlUtils.js
===================================================================

--- funjs/public_html/funjs/HtmlUtils.js	2014-06-20 14:28:40 UTC (rev 719)
+++ funjs/public_html/funjs/HtmlUtils.js	2014-06-26 12:36:48 UTC (rev 720)
@@ -10,3 +10,58 @@
 $warm = console.warn.bind(console);
 
 $nop = new Function();
+
+/*
+ * object.watch polyfill
+ *
+ * 2012-04-03
+ *
+ * By Eli Grey, http://eligrey.com
+ * Public Domain.
+ * NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
+ */
+ 
+// object.watch
+if (!Object.prototype.watch) {
+	Object.defineProperty(Object.prototype, "watch", {
+		  enumerable: false
+		, configurable: true
+		, writable: false
+		, value: function (prop, handler) {
+			var
+			  oldval = this[prop]
+			, newval = oldval
+			, getter = function () {
+				return newval;
+			}
+			, setter = function (val) {
+				oldval = newval;
+				return newval = handler.call(this, prop, oldval, val);
+			}
+			;
+			
+			if (delete this[prop]) { // can't watch constants
+				Object.defineProperty(this, prop, {
+					  get: getter
+					, set: setter
+					, enumerable: true
+					, configurable: true
+				});
+			}
+		}
+	});
+}
+ 
+// object.unwatch
+if (!Object.prototype.unwatch) {
+	Object.defineProperty(Object.prototype, "unwatch", {
+		  enumerable: false
+		, configurable: true
+		, writable: false
+		, value: function (prop) {
+			var val = this[prop];
+			delete this[prop]; // remove accessors
+			this[prop] = val;
+		}
+	});
+}
\ No newline at end of file

Modified: funjs/public_html/funjs/TemplateEngine.js
===================================================================
--- funjs/public_html/funjs/TemplateEngine.js	2014-06-20 14:28:40 UTC (rev 719)
+++ funjs/public_html/funjs/TemplateEngine.js	2014-06-26 12:36:48 UTC (rev 720)
@@ -51,6 +51,7 @@
             if (datas.ctrl) {
                 this.currentCtrl = new window[datas.ctrl];
                 this.currentCtrl.node = element;
+                element.controller = this.currentCtrl;
                 this.currentCtrl.load();
             }
             
@@ -93,7 +94,7 @@
             }
             
             if (datas.if) {
-                var test = this.parseExpression(datas.if, data);
+                var test = this.parseExpression(datas.if, data).result;
                 if (test == "false") {
                     element.parentNode.removeChild(element);
                 }
@@ -102,16 +103,34 @@
     },
     
     parseText: function(element, data) {
+        var self = this;
         var text = element.nodeValue;
-        element.nodeValue = this.parseExpression(text, data);
+        
+        var parent = element.parentNode;
+        
+        var parsing = this.parseExpression(text, data);
+        element.nodeValue = parsing.result;
+        
+        var variables = parsing.variables;
+        variables.forEach(function(v) {
+            data.watch(v, function(prop, oldval, val) {
+                parent.textContent = text;
+                
+                var data = {};
+                data[prop] = val;
+                self.parse(parent, data);
+            });
+        });
     },
     
     parseExpression : function(exp, data) {
         var self = this;
+        var variables = [];
         
-        return exp.replace(this.REGEXP_VAR, function(match, negation, test, conditionMark, values, trueValue, falseValue) {
+        var result = exp.replace(this.REGEXP_VAR, function(match, negation, test, conditionMark, values, trueValue, falseValue) {
             
             var result = self.parseValue(test, data);
+            variables.push(test);
             
             if (values == null) {
                 if (conditionMark == "?" && result == null) {
@@ -128,6 +147,11 @@
             
             return result;
         });
+        
+        return {
+            variables : variables,
+            result : result
+        }
     },
     
     parseValue : function(value, data) {

Modified: funjs/public_html/index.html
===================================================================
--- funjs/public_html/index.html	2014-06-20 14:28:40 UTC (rev 719)
+++ funjs/public_html/index.html	2014-06-26 12:36:48 UTC (rev 720)
@@ -20,6 +20,7 @@
                 <ul>
                     <li data-loop="list" data-loop-var="v" data-loop-index="i">{{i}} {{v}}</li>
                 </ul>
+                <div>{{name?}}</div>
                 <div data-if="{{test}}">TEST</div>
                 <div data-if="{{!test}}">NO TEST</div>
             </div>
@@ -30,14 +31,16 @@
                 load : function() {
                     $log("Load BodyCtrl", this.node);
                     
-                    $template.load("hello", "content", {
+                    this.model = {
                         test : true,
                         value : "YES", 
                         other : "NO", 
                         from : "me", 
                         to : "you",
+                        name : "eee",
                         list : ["tutu", "titi", "tata", "toto"]
-                    });
+                    };
+                    $template.load("hello", "content", this.model);
                 },
                 
                 touch : function() {
@@ -49,6 +52,16 @@
     </head>
     <body data-ctrl="BodyCtrl">
         <h1>Test application</h1>
+        
+        <input type="text" data-model="name" value="tutu">
+        <div>{{name?}}</div>
+        
+        <select id="select">
+            <option value="value1">Valeur 1</option> 
+            <option value="value2" selected>Valeur 2</option>
+            <option value="value3">Valeur 3</option>
+        </select>
+
         <div id="content" data-click="touch"></div>
     </body>
 </html>

    

[Sandbox-commits] r720 - in funjs/public_html: . funjs

jruchaud＠users.nuiton.org