diff --git a/karma.conf.js b/karma.conf.js index bc75f8d..afcf036 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -6,6 +6,7 @@ module.exports = function(config) { 'src/js/core/core.js', 'src/js/core/is.js', 'src/js/core/di.js', + 'src/js/core/should.js', 'src/js/core/htmlBuilder.js', 'src/js/core/should.js', 'src/js/core/appShell.js', diff --git a/src/index.html b/src/index.html index 02c1fb7..f1e2a49 100644 --- a/src/index.html +++ b/src/index.html @@ -175,6 +175,9 @@ + diff --git a/src/js/core/htmlBuilder.js b/src/js/core/htmlBuilder.js index cdc10f7..a0c5116 100644 --- a/src/js/core/htmlBuilder.js +++ b/src/js/core/htmlBuilder.js @@ -1,16 +1,16 @@ (function(core){ "use strict"; - var HtmlBuilder = {}; + var html = {}; var should = core.should; - HtmlBuilder.element = function(template, model) { + html.element = function(template, model) { var el = document.createElement('div'); - el.innerHTML = HtmlBuilder.template(template, model); + el.innerHTML = html.template(template, model); return el.children[0]; }; - HtmlBuilder.template = function(template, model) { + html.template = function(template, model) { should.beString(template, "template"); var regex = /(?:{([^}]+)})/g, html; @@ -18,14 +18,14 @@ html = template; } else { html = template.replace(regex, function(m, g1) { - return HtmlBuilder.escapeHtml(model[g1]); + return html.escapeHtml(model[g1]); }); } return html; }; - HtmlBuilder.compileTemplate = function (template) { + html.compileTemplate = function (template) { var regex = /(?:{([^}]+)})/g; var sb = []; @@ -39,7 +39,7 @@ if(m.index > index) { sb.push("\t\thtml.push('" + normalize(template.substr(index, m.index - index)) + "');"); } - sb.push('\t\thtml.push(' + m[1] + ');'); + sb.push(replaceToken(m[1])); index = m.index + m[0].length; } @@ -49,7 +49,7 @@ sb.push("\treturn html.join('');"); sb.push('}'); sb.push('})()'); - // console.log(sb.join('\r\n')); + console.log(eval(sb.join('\r\n')).toString()); return eval(sb.join('\r\n')); }; @@ -57,7 +57,7 @@ return str.replace(/(\r|\n)+/g, '').replace("'", "\\\'"); } - HtmlBuilder.escapeHtml = function(obj) { + html.escapeHtml = function(obj) { if(obj == null) { return obj; } @@ -74,6 +74,24 @@ .replace(/'/g, "'"); }; - core.html = HtmlBuilder; + + function replaceToken(token, indent) { + if(token.indexOf('foreach') == 0) { + var r = /([\w\.])\sin\s([\w\.]+)/g; + var m = r.exec(token); + var v = m[1]; + var col = m[2]; + + return 'var '+ v + '_list = '+ col + '.slice(), ' + v + ';\r\nwhile(('+v+'='+v+'_list.splice(0,1)[0])!==undefined)\r\n{'; + } + + if(token == '/') { + return "}"; + } + + return '\t\thtml.push(' + token + ');console.log(html);' + } + + core.html = html; })(window.core); \ No newline at end of file diff --git a/tests/core/htmlSpec.js b/tests/core/htmlSpec.js index 6078c63..fddea1c 100644 --- a/tests/core/htmlSpec.js +++ b/tests/core/htmlSpec.js @@ -7,4 +7,12 @@ describe('html templates', function () { expect(typeof compiled).toBe("function"); expect(compiled({name: 'test'})).toBe('
test
'); }); + + it('should support foreach', function () { + var t = '{foreach n in m.lst}{foreach c in m.lst2}{n}{c}{/}{/}'; + var compiled = html.compileTemplate(t); + var result = compiled({lst:[1,2,3], lst2:['a','b']}); + console.log(result); + expect(result).toBe('1a1b2a2b3a3b'); + }); }); \ No newline at end of file