OLD | NEW |
1 /** | 1 /** |
2 * @fileoverview This is a simple template engine inspired by JsTemplates | 2 * @fileoverview This is a simple template engine inspired by JsTemplates |
3 * optimized for i18n. | 3 * optimized for i18n. |
4 * | 4 * |
5 * It currently supports two handlers: | 5 * It currently supports two handlers: |
6 * | 6 * |
7 * * i18n-content which sets the textContent of the element | 7 * * i18n-content which sets the textContent of the element |
8 * | 8 * |
9 * <span i18n-content="myContent"></span> | 9 * <span i18n-content="myContent"></span> |
10 * i18nTemplate.process(element, {'myContent': 'Content'}); | 10 * i18nTemplate.process(element, {'myContent': 'Content'}); |
(...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
49 var propExpr = a[2]; | 49 var propExpr = a[2]; |
50 var value = obj[propExpr]; | 50 var value = obj[propExpr]; |
51 if (propName.charAt(0) == '.') { | 51 if (propName.charAt(0) == '.') { |
52 var path = propName.slice(1).split('.'); | 52 var path = propName.slice(1).split('.'); |
53 var object = element; | 53 var object = element; |
54 while (object && path.length > 1) { | 54 while (object && path.length > 1) { |
55 object = object[path.shift()]; | 55 object = object[path.shift()]; |
56 } | 56 } |
57 if (object) { | 57 if (object) { |
58 object[path] = value; | 58 object[path] = value; |
| 59 // In case we set innerHTML (ignoring others) we need to |
| 60 // recursively check the content |
| 61 if (path == 'innerHTML') { |
| 62 process(element, obj); |
| 63 } |
59 } | 64 } |
60 } else { | 65 } else { |
61 element.setAttribute(propName, value); | 66 element.setAttribute(propName, value); |
62 } | 67 } |
63 } | 68 } |
64 } | 69 } |
65 } | 70 } |
66 }; | 71 }; |
67 | 72 |
68 var attributeNames = []; | 73 var attributeNames = []; |
69 for (var key in handlers) { | 74 for (var key in handlers) { |
70 attributeNames.push(key); | 75 attributeNames.push(key); |
71 } | 76 } |
72 var selector = '[' + attributeNames.join('],[') + ']'; | 77 var selector = '[' + attributeNames.join('],[') + ']'; |
73 | 78 |
74 return { | 79 /** |
75 /** | 80 * Processes a DOM tree with the {@code obj} map. |
76 * Processes a DOM tree with the {@code obj} map. | 81 */ |
77 */ | 82 function process(node, obj) { |
78 process: function(node, obj) { | 83 var elements = node.querySelectorAll(selector); |
79 var elements = node.querySelectorAll(selector); | 84 for (var element, i = 0; element = elements[i]; i++) { |
80 for (var element, i = 0; element = elements[i]; i++) { | 85 for (var j = 0; j < attributeNames.length; j++) { |
81 for (var j = 0; j < attributeNames.length; j++) { | 86 var name = attributeNames[j]; |
82 var name = attributeNames[j]; | 87 var att = element.getAttribute(name); |
83 var att = element.getAttribute(name); | 88 if (att != null) { |
84 if (att != null) { | 89 handlers[name](element, att, obj); |
85 handlers[name](element, att, obj); | |
86 } | |
87 } | 90 } |
88 } | 91 } |
89 } | 92 } |
| 93 } |
| 94 |
| 95 return { |
| 96 process: process |
90 }; | 97 }; |
91 })(); | 98 })(); |
OLD | NEW |