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>