| OLD | NEW |
| 1 // Copyright (c) 2011, the Dart project authors. Please see the AUTHORS file | 1 // Copyright (c) 2011, the Dart project authors. Please see the AUTHORS file |
| 2 // for details. All rights reserved. Use of this source code is governed by a | 2 // for details. All rights reserved. Use of this source code is governed by a |
| 3 // BSD-style license that can be found in the LICENSE file. | 3 // BSD-style license that can be found in the LICENSE file. |
| 4 | 4 |
| 5 #import('dart:html'); | 5 #import('dart:html'); |
| 6 | 6 |
| 7 // Utility functions: | 7 // Utility functions: |
| 8 String safeHTML(String value) { | 8 String safeHTML(String value) { |
| 9 // TODO(terry): TBD | 9 // TODO(terry): TBD |
| 10 return value; | 10 return value; |
| (...skipping 42 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 53 | 53 |
| 54 FriendList(List<Friend> friends) { | 54 FriendList(List<Friend> friends) { |
| 55 _fragment = new Element.tag('div'); | 55 _fragment = new Element.tag('div'); |
| 56 Element e0 = new Element.html('<div>Friends:</div>'); | 56 Element e0 = new Element.html('<div>Friends:</div>'); |
| 57 _fragment.elements.add(e0); | 57 _fragment.elements.add(e0); |
| 58 Element e0_0 = new Element.html('<ul></ul>'); // Node before #each | 58 Element e0_0 = new Element.html('<ul></ul>'); // Node before #each |
| 59 e0.elements.add(e0_0); | 59 e0.elements.add(e0_0); |
| 60 each_0(friends, e0_0); | 60 each_0(friends, e0_0); |
| 61 } | 61 } |
| 62 | 62 |
| 63 Element get root() => _fragment.nodes.first; | 63 Element get root => _fragment.nodes.first; |
| 64 | 64 |
| 65 String toString(){ | 65 String toString(){ |
| 66 return _fragment.innerHTML; | 66 return _fragment.innerHTML; |
| 67 } | 67 } |
| 68 } | 68 } |
| 69 | 69 |
| 70 | 70 |
| 71 /* More template control: | 71 /* More template control: |
| 72 ====================== | 72 ====================== |
| 73 | 73 |
| (...skipping 50 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 124 return safeHTML('circles = ${item.friendsCircle + item.familyCircle + item.w
orkCircle}'); | 124 return safeHTML('circles = ${item.friendsCircle + item.familyCircle + item.w
orkCircle}'); |
| 125 } | 125 } |
| 126 | 126 |
| 127 FriendEntry(Friend friend) { | 127 FriendEntry(Friend friend) { |
| 128 _fragment = new Element.tag('div'); | 128 _fragment = new Element.tag('div'); |
| 129 Element e0 = new Element.html('<li></li>'); // Node before #with | 129 Element e0 = new Element.html('<li></li>'); // Node before #with |
| 130 _fragment.elements.add(e0); | 130 _fragment.elements.add(e0); |
| 131 with_0(friend, e0); | 131 with_0(friend, e0); |
| 132 } | 132 } |
| 133 | 133 |
| 134 Element get root() => _fragment.nodes.first; | 134 Element get root => _fragment.nodes.first; |
| 135 | 135 |
| 136 String toString(){ | 136 String toString(){ |
| 137 return _fragment.innerHTML; | 137 return _fragment.innerHTML; |
| 138 } | 138 } |
| 139 } | 139 } |
| 140 | 140 |
| 141 | 141 |
| 142 /* Template with events: | 142 /* Template with events: |
| 143 ===================== | 143 ===================== |
| 144 | 144 |
| 145 template HTML FriendEntryEvents(Friend friend) { | 145 template HTML FriendEntryEvents(Friend friend) { |
| 146 <li> | 146 <li> |
| 147 ${#with friend} | 147 ${#with friend} |
| 148 <span var=friendElem style="cursor: pointer;">${name}</span> | 148 <span var=friendElem style="cursor: pointer;">${name}</span> |
| 149 ${#if (age < 18)} | 149 ${#if (age < 18)} |
| 150 <span class=”left-space”>child</span> | 150 <span class=”left-space”>child</span> |
| 151 ${#else} | 151 ${#else} |
| 152 <span class=”left-space”>adult</span> | 152 <span class=”left-space”>adult</span> |
| 153 ${/if} | 153 ${/if} |
| 154 <span class=”left-space”>circles = ${friendCircle + familyCircle + workCi
rcle}</span> | 154 <span class=”left-space”>circles = ${friendCircle + familyCircle + workCi
rcle}</span> |
| 155 ${/friend} | 155 ${/friend} |
| 156 </li> | 156 </li> |
| 157 } | 157 } |
| 158 */ | 158 */ |
| 159 class FriendEntryEvents /*extends Template*/ { | 159 class FriendEntryEvents /*extends Template*/ { |
| 160 Element _fragment; | 160 Element _fragment; |
| 161 var _friendElem; | 161 var _friendElem; |
| 162 | 162 |
| 163 get friendElem() => _friendElem; | 163 get friendElem => _friendElem; |
| 164 | 164 |
| 165 // ${#with friend} | 165 // ${#with friend} |
| 166 with_0(Friend item, Element parent) { | 166 with_0(Friend item, Element parent) { |
| 167 _friendElem = new Element.html('<span style="cursor: pointer;"></span>'); /
/ Node before injection | 167 _friendElem = new Element.html('<span style="cursor: pointer;"></span>'); /
/ Node before injection |
| 168 _friendElem.innerHTML = inject_0(item); | 168 _friendElem.innerHTML = inject_0(item); |
| 169 parent.elements.add(_friendElem); | 169 parent.elements.add(_friendElem); |
| 170 | 170 |
| 171 // ${#if expression} | 171 // ${#if expression} |
| 172 if (if_0(item)) { | 172 if (if_0(item)) { |
| 173 var e1 = new Element.html('<span class="left-space">child</span>'); | 173 var e1 = new Element.html('<span class="left-space">child</span>'); |
| (...skipping 24 matching lines...) Expand all Loading... |
| 198 return safeHTML('circles = ${item.friendsCircle + item.familyCircle + item.wo
rkCircle}'); | 198 return safeHTML('circles = ${item.friendsCircle + item.familyCircle + item.wo
rkCircle}'); |
| 199 } | 199 } |
| 200 | 200 |
| 201 FriendEntryEvents(Friend friend) { | 201 FriendEntryEvents(Friend friend) { |
| 202 _fragment = new Element.tag('div'); | 202 _fragment = new Element.tag('div'); |
| 203 Element e0 = new Element.html('<li></li>'); // Node before #with | 203 Element e0 = new Element.html('<li></li>'); // Node before #with |
| 204 _fragment.elements.add(e0); | 204 _fragment.elements.add(e0); |
| 205 with_0(friend, e0); | 205 with_0(friend, e0); |
| 206 } | 206 } |
| 207 | 207 |
| 208 Element get root() => _fragment.nodes.first; | 208 Element get root => _fragment.nodes.first; |
| 209 | 209 |
| 210 String toString(){ | 210 String toString(){ |
| 211 return _fragment.innerHTML; | 211 return _fragment.innerHTML; |
| 212 } | 212 } |
| 213 } | 213 } |
| 214 | 214 |
| 215 | 215 |
| 216 void main() { | 216 void main() { |
| 217 // Setup style sheet for page. | 217 // Setup style sheet for page. |
| 218 document.head.elements.add(new Element.html('<style>.left-space { margin-left:
10px; }</style>')); | 218 document.head.elements.add(new Element.html('<style>.left-space { margin-left:
10px; }</style>')); |
| (...skipping 15 matching lines...) Expand all Loading... |
| 234 document.body.elements.add(clickableFriend.root); | 234 document.body.elements.add(clickableFriend.root); |
| 235 clickableFriend.friendElem.on.click.add((e) { | 235 clickableFriend.friendElem.on.click.add((e) { |
| 236 var elemStyle = e.srcElement.style; | 236 var elemStyle = e.srcElement.style; |
| 237 String toggleColor = elemStyle.getPropertyValue("background-color") == "red"
? "white" : "red"; | 237 String toggleColor = elemStyle.getPropertyValue("background-color") == "red"
? "white" : "red"; |
| 238 elemStyle.setProperty("background-color", "${toggleColor}"); | 238 elemStyle.setProperty("background-color", "${toggleColor}"); |
| 239 }); | 239 }); |
| 240 | 240 |
| 241 // Calling template inside of a template: | 241 // Calling template inside of a template: |
| 242 // document.body.elements.add(new Templates(friends).root); | 242 // document.body.elements.add(new Templates(friends).root); |
| 243 } | 243 } |
| OLD | NEW |