| OLD | NEW |
| (Empty) |
| 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 | |
| 3 // BSD-style license that can be found in the LICENSE file. | |
| 4 | |
| 5 import 'dart:html'; | |
| 6 | |
| 7 // Utility functions: | |
| 8 String safeHTML(String value) { | |
| 9 // TODO(terry): TBD | |
| 10 return value; | |
| 11 } | |
| 12 | |
| 13 /* Data Model */ | |
| 14 class Friend { | |
| 15 String name; | |
| 16 String phone; | |
| 17 int age; | |
| 18 int friendsCircle, familyCircle, workCircle; | |
| 19 | |
| 20 Friend(this.name, this.phone, this.age, | |
| 21 this.friendsCircle, this.familyCircle, this.workCircle); | |
| 22 } | |
| 23 | |
| 24 /* Simple template: | |
| 25 ================ | |
| 26 | |
| 27 template HTML FriendList(List<Friend> friends) { | |
| 28 <div>Friends: | |
| 29 <ul> | |
| 30 ${#each friends} // Iterates over each friend | |
| 31 <li>${name}</li> // Scope of block is Friend type | |
| 32 ${/each} | |
| 33 </ul> | |
| 34 </div> | |
| 35 } | |
| 36 */ | |
| 37 class FriendList /*extends Template*/ { | |
| 38 Element _fragment; | |
| 39 | |
| 40 // ${#each friends} | |
| 41 each_0(List items, Element parent) { | |
| 42 for (var item in items) { | |
| 43 var e0 = new Element.html('<li></li>'); // Node before injection | |
| 44 e0.innerHTML = inject_0(item); | |
| 45 parent.elements.add(e0); | |
| 46 } | |
| 47 } | |
| 48 | |
| 49 // ${name} | |
| 50 String inject_0(item) { | |
| 51 return safeHTML('''${item.name}'''); | |
| 52 } | |
| 53 | |
| 54 FriendList(List<Friend> friends) { | |
| 55 _fragment = new Element.tag('div'); | |
| 56 Element e0 = new Element.html('<div>Friends:</div>'); | |
| 57 _fragment.elements.add(e0); | |
| 58 Element e0_0 = new Element.html('<ul></ul>'); // Node before #each | |
| 59 e0.elements.add(e0_0); | |
| 60 each_0(friends, e0_0); | |
| 61 } | |
| 62 | |
| 63 Element get root => _fragment.nodes.first; | |
| 64 | |
| 65 String toString(){ | |
| 66 return _fragment.innerHTML; | |
| 67 } | |
| 68 } | |
| 69 | |
| 70 | |
| 71 /* More template control: | |
| 72 ====================== | |
| 73 | |
| 74 template HTML FriendEntry(Friend friend) { | |
| 75 <li> | |
| 76 ${#with friend} | |
| 77 <span>${name}</span> | |
| 78 ${#if (age < 18)} | |
| 79 <span class=”left-space”>child</span> | |
| 80 ${#else} | |
| 81 <span class=”left-space”>adult</span> | |
| 82 ${/if} | |
| 83 <span class=”left-space”>circles = ${friendCircle + familyCircle + workC
ircle}</span> | |
| 84 ${/friend} | |
| 85 </li> | |
| 86 } | |
| 87 */ | |
| 88 class FriendEntry /*extends Template*/ { | |
| 89 Element _fragment; | |
| 90 | |
| 91 // ${#with friend} | |
| 92 with_0(Friend item, Element parent) { | |
| 93 var e0 = new Element.html('<span></span>'); // Node before injection | |
| 94 e0.innerHTML = inject_0(item); | |
| 95 parent.elements.add(e0); | |
| 96 | |
| 97 // ${#if expression} | |
| 98 if (if_0(item)) { | |
| 99 var e1 = new Element.html('<span class="left-space">child</span>'); | |
| 100 parent.elements.add(e1); | |
| 101 } else { | |
| 102 var e2 = new Element.html('<span class="left-space">adult</span>'); | |
| 103 parent.elements.add(e2); | |
| 104 } | |
| 105 | |
| 106 // Node before injection. | |
| 107 var e3 = new Element.html('<span class="left-space"></span>'); | |
| 108 e3.innerHTML = inject_1(item); | |
| 109 parent.elements.add(e3); | |
| 110 } | |
| 111 | |
| 112 // expression (age < 18)} | |
| 113 bool if_0(var item) { | |
| 114 return (item.age < 18); | |
| 115 } | |
| 116 | |
| 117 // ${name} | |
| 118 String inject_0(item) { | |
| 119 return safeHTML('''${item.name}'''); | |
| 120 } | |
| 121 | |
| 122 // ${friendCircle + family.Circle + workCircle | |
| 123 String inject_1(item) { | |
| 124 return safeHTML('circles = ${item.friendsCircle + item.familyCircle + item.w
orkCircle}'); | |
| 125 } | |
| 126 | |
| 127 FriendEntry(Friend friend) { | |
| 128 _fragment = new Element.tag('div'); | |
| 129 Element e0 = new Element.html('<li></li>'); // Node before #with | |
| 130 _fragment.elements.add(e0); | |
| 131 with_0(friend, e0); | |
| 132 } | |
| 133 | |
| 134 Element get root => _fragment.nodes.first; | |
| 135 | |
| 136 String toString(){ | |
| 137 return _fragment.innerHTML; | |
| 138 } | |
| 139 } | |
| 140 | |
| 141 | |
| 142 /* Template with events: | |
| 143 ===================== | |
| 144 | |
| 145 template HTML FriendEntryEvents(Friend friend) { | |
| 146 <li> | |
| 147 ${#with friend} | |
| 148 <span var=friendElem style="cursor: pointer;">${name}</span> | |
| 149 ${#if (age < 18)} | |
| 150 <span class=”left-space”>child</span> | |
| 151 ${#else} | |
| 152 <span class=”left-space”>adult</span> | |
| 153 ${/if} | |
| 154 <span class=”left-space”>circles = ${friendCircle + familyCircle + workCi
rcle}</span> | |
| 155 ${/friend} | |
| 156 </li> | |
| 157 } | |
| 158 */ | |
| 159 class FriendEntryEvents /*extends Template*/ { | |
| 160 Element _fragment; | |
| 161 var _friendElem; | |
| 162 | |
| 163 get friendElem => _friendElem; | |
| 164 | |
| 165 // ${#with friend} | |
| 166 with_0(Friend item, Element parent) { | |
| 167 _friendElem = new Element.html('<span style="cursor: pointer;"></span>'); /
/ Node before injection | |
| 168 _friendElem.innerHTML = inject_0(item); | |
| 169 parent.elements.add(_friendElem); | |
| 170 | |
| 171 // ${#if expression} | |
| 172 if (if_0(item)) { | |
| 173 var e1 = new Element.html('<span class="left-space">child</span>'); | |
| 174 parent.elements.add(e1); | |
| 175 } else { | |
| 176 var e2 = new Element.html('<span class="left-space">adult</span>'); | |
| 177 parent.elements.add(e2); | |
| 178 } | |
| 179 | |
| 180 // Node before injection. | |
| 181 var e3 = new Element.html('<span class="left-space"></span>'); | |
| 182 e3.innerHTML = inject_1(item); | |
| 183 parent.elements.add(e3); | |
| 184 } | |
| 185 | |
| 186 // expression (age < 18)} | |
| 187 bool if_0(var item) { | |
| 188 return (item.age < 18); | |
| 189 } | |
| 190 | |
| 191 // ${name} | |
| 192 String inject_0(item) { | |
| 193 return safeHTML('''${item.name}'''); | |
| 194 } | |
| 195 | |
| 196 // ${friendCircle + family.Circle + workCircle | |
| 197 String inject_1(item) { | |
| 198 return safeHTML('circles = ${item.friendsCircle + item.familyCircle + item.wo
rkCircle}'); | |
| 199 } | |
| 200 | |
| 201 FriendEntryEvents(Friend friend) { | |
| 202 _fragment = new Element.tag('div'); | |
| 203 Element e0 = new Element.html('<li></li>'); // Node before #with | |
| 204 _fragment.elements.add(e0); | |
| 205 with_0(friend, e0); | |
| 206 } | |
| 207 | |
| 208 Element get root => _fragment.nodes.first; | |
| 209 | |
| 210 String toString(){ | |
| 211 return _fragment.innerHTML; | |
| 212 } | |
| 213 } | |
| 214 | |
| 215 | |
| 216 void main() { | |
| 217 // Setup style sheet for page. | |
| 218 document.head.elements.add(new Element.html('<style>.left-space { margin-left:
10px; }</style>')); | |
| 219 | |
| 220 // Create data model. | |
| 221 List<Friend> friends = new List<Friend>(); | |
| 222 friends.add(new Friend('Tom','425.123.4567', 35, 20, 10, 40)); | |
| 223 friends.add(new Friend('Sue','802.987.6543', 23, 53, 25, 80)); | |
| 224 friends.add(new Friend('Bill','617.123.4444', 50, 10, 5, 110)); | |
| 225 | |
| 226 // Simple template. | |
| 227 document.body.elements.add(new FriendList(friends).root); | |
| 228 | |
| 229 // Use control template. | |
| 230 document.body.elements.add(new FriendEntry(friends[0]).root); | |
| 231 | |
| 232 // Template with Events: | |
| 233 var clickableFriend = new FriendEntryEvents(friends[0]); | |
| 234 document.body.elements.add(clickableFriend.root); | |
| 235 clickableFriend.friendElem.on.click.add((e) { | |
| 236 var elemStyle = e.srcElement.style; | |
| 237 String toggleColor = elemStyle.getPropertyValue("background-color") == "red"
? "white" : "red"; | |
| 238 elemStyle.setProperty("background-color", "${toggleColor}"); | |
| 239 }); | |
| 240 | |
| 241 // Calling template inside of a template: | |
| 242 // document.body.elements.add(new Templates(friends).root); | |
| 243 } | |
| OLD | NEW |