| OLD | NEW |
| 1 // Copyright (c) 2013, the Dart project authors. Please see the AUTHORS file | 1 // Copyright (c) 2013, 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 part of mdv; | 5 part of template_binding; |
| 6 | 6 |
| 7 // This code is a port of Model-Driven-Views: | 7 // This code is a port of what was formerly known as Model-Driven-Views, now |
| 8 // https://github.com/polymer-project/mdv | 8 // located at: |
| 9 // The code mostly comes from src/template_element.js | 9 // https://github.com/polymer/TemplateBinding |
| 10 // https://github.com/polymer/NodeBind |
| 10 | 11 |
| 11 // TODO(jmesserly): not sure what kind of boolean conversion rules to | 12 // TODO(jmesserly): not sure what kind of boolean conversion rules to |
| 12 // apply for template data-binding. HTML attributes are true if they're | 13 // apply for template data-binding. HTML attributes are true if they're |
| 13 // present. However Dart only treats "true" as true. Since this is HTML we'll | 14 // present. However Dart only treats "true" as true. Since this is HTML we'll |
| 14 // use something closer to the HTML rules: null (missing) and false are false, | 15 // use something closer to the HTML rules: null (missing) and false are false, |
| 15 // everything else is true. See: https://github.com/polymer-project/mdv/issues/5
9 | 16 // everything else is true. |
| 17 // See: https://github.com/polymer/TemplateBinding/issues/59 |
| 16 bool _toBoolean(value) => null != value && false != value; | 18 bool _toBoolean(value) => null != value && false != value; |
| 17 | 19 |
| 18 Node _createDeepCloneAndDecorateTemplates(Node node, BindingDelegate delegate) { | 20 Node _createDeepCloneAndDecorateTemplates(Node node, BindingDelegate delegate) { |
| 19 var clone = node.clone(false); // Shallow clone. | 21 var clone = node.clone(false); // Shallow clone. |
| 20 if (clone is Element && clone.isTemplate) { | 22 if (isSemanticTemplate(clone)) { |
| 21 TemplateElement.decorate(clone, node); | 23 TemplateBindExtension.decorate(clone, node); |
| 22 if (delegate != null) { | 24 if (delegate != null) { |
| 23 _mdv(clone)._bindingDelegate = delegate; | 25 templateBindFallback(clone)._bindingDelegate = delegate; |
| 24 } | 26 } |
| 25 } | 27 } |
| 26 | 28 |
| 27 for (var c = node.firstChild; c != null; c = c.nextNode) { | 29 for (var c = node.firstChild; c != null; c = c.nextNode) { |
| 28 clone.append(_createDeepCloneAndDecorateTemplates(c, delegate)); | 30 clone.append(_createDeepCloneAndDecorateTemplates(c, delegate)); |
| 29 } | 31 } |
| 30 return clone; | 32 return clone; |
| 31 } | 33 } |
| 32 | 34 |
| 33 void _addBindings(Node node, model, [BindingDelegate delegate]) { | 35 void _addBindings(Node node, model, [BindingDelegate delegate]) { |
| (...skipping 11 matching lines...) Expand all Loading... |
| 45 | 47 |
| 46 for (var c = node.firstChild; c != null; c = c.nextNode) { | 48 for (var c = node.firstChild; c != null; c = c.nextNode) { |
| 47 _addBindings(c, model, delegate); | 49 _addBindings(c, model, delegate); |
| 48 } | 50 } |
| 49 } | 51 } |
| 50 | 52 |
| 51 List _parseAttributeBindings(Element element) { | 53 List _parseAttributeBindings(Element element) { |
| 52 var bindings = null; | 54 var bindings = null; |
| 53 var ifFound = false; | 55 var ifFound = false; |
| 54 var bindFound = false; | 56 var bindFound = false; |
| 55 var isTemplateNode = element.isTemplate; | 57 var isTemplateNode = isSemanticTemplate(element); |
| 56 | 58 |
| 57 element.attributes.forEach((name, value) { | 59 element.attributes.forEach((name, value) { |
| 58 if (isTemplateNode) { | 60 if (isTemplateNode) { |
| 59 if (name == 'if') { | 61 if (name == 'if') { |
| 60 ifFound = true; | 62 ifFound = true; |
| 61 } else if (name == 'bind' || name == 'repeat') { | 63 } else if (name == 'bind' || name == 'repeat') { |
| 62 bindFound = true; | 64 bindFound = true; |
| 63 if (value == '') value = '{{}}'; | 65 if (value == '') value = '{{}}'; |
| 64 } | 66 } |
| 65 } | 67 } |
| (...skipping 18 matching lines...) Expand all Loading... |
| 84 BindingDelegate delegate) { | 86 BindingDelegate delegate) { |
| 85 | 87 |
| 86 for (var i = 0; i < bindings.length; i += 2) { | 88 for (var i = 0; i < bindings.length; i += 2) { |
| 87 _setupBinding(node, bindings[i], bindings[i + 1], model, delegate); | 89 _setupBinding(node, bindings[i], bindings[i + 1], model, delegate); |
| 88 } | 90 } |
| 89 } | 91 } |
| 90 | 92 |
| 91 void _setupBinding(Node node, String name, List tokens, model, | 93 void _setupBinding(Node node, String name, List tokens, model, |
| 92 BindingDelegate delegate) { | 94 BindingDelegate delegate) { |
| 93 | 95 |
| 94 // If this is a custom element, give the .xtag a change to bind. | |
| 95 node = _nodeOrCustom(node); | |
| 96 | |
| 97 if (_isSimpleBinding(tokens)) { | 96 if (_isSimpleBinding(tokens)) { |
| 98 _bindOrDelegate(node, name, model, tokens[1], delegate); | 97 _bindOrDelegate(node, name, model, tokens[1], delegate); |
| 99 return; | 98 return; |
| 100 } | 99 } |
| 101 | 100 |
| 102 // TODO(jmesserly): MDV caches the closure on the tokens, but I'm not sure | 101 // TODO(jmesserly): MDV caches the closure on the tokens, but I'm not sure |
| 103 // why they do that instead of just caching the entire CompoundBinding object | 102 // why they do that instead of just caching the entire CompoundBinding object |
| 104 // and unbindAll then bind to the new model. | 103 // and unbindAll then bind to the new model. |
| 105 var replacementBinding = new CompoundBinding() | 104 var replacementBinding = new CompoundBinding() |
| 106 ..scheduled = true | 105 ..scheduled = true |
| (...skipping 15 matching lines...) Expand all Loading... |
| 122 }; | 121 }; |
| 123 | 122 |
| 124 for (var i = 1; i < tokens.length; i += 2) { | 123 for (var i = 1; i < tokens.length; i += 2) { |
| 125 // TODO(jmesserly): not sure if this index is correct. See my comment here: | 124 // TODO(jmesserly): not sure if this index is correct. See my comment here: |
| 126 // https://github.com/Polymer/mdv/commit/f1af6fe683fd06eed2a7a7849f01c227db1
2cda3#L0L1035 | 125 // https://github.com/Polymer/mdv/commit/f1af6fe683fd06eed2a7a7849f01c227db1
2cda3#L0L1035 |
| 127 _bindOrDelegate(replacementBinding, i, model, tokens[i], delegate); | 126 _bindOrDelegate(replacementBinding, i, model, tokens[i], delegate); |
| 128 } | 127 } |
| 129 | 128 |
| 130 replacementBinding.resolve(); | 129 replacementBinding.resolve(); |
| 131 | 130 |
| 132 node.bind(name, replacementBinding, 'value'); | 131 nodeBind(node).bind(name, replacementBinding, 'value'); |
| 133 } | 132 } |
| 134 | 133 |
| 135 void _bindOrDelegate(node, name, model, String path, | 134 void _bindOrDelegate(node, name, model, String path, |
| 136 BindingDelegate delegate) { | 135 BindingDelegate delegate) { |
| 137 | 136 |
| 138 if (delegate != null) { | 137 if (delegate != null) { |
| 139 var delegateBinding = delegate.getBinding(model, path, name, node); | 138 var delegateBinding = delegate.getBinding(model, path, name, node); |
| 140 if (delegateBinding != null) { | 139 if (delegateBinding != null) { |
| 141 model = delegateBinding; | 140 model = delegateBinding; |
| 142 path = 'value'; | 141 path = 'value'; |
| 143 } | 142 } |
| 144 } | 143 } |
| 145 | 144 |
| 146 node.bind(name, model, path); | 145 if (node is CompoundBinding) { |
| 146 node.bind(name, model, path); |
| 147 } else { |
| 148 nodeBind(node).bind(name, model, path); |
| 149 } |
| 147 } | 150 } |
| 148 | 151 |
| 149 /** | |
| 150 * Gets the [node]'s custom [Element.xtag] if present, otherwise returns | |
| 151 * the node. This is used so nodes can override [Node.bind], [Node.unbind], | |
| 152 * and [Node.unbindAll] like InputElement does. | |
| 153 */ | |
| 154 // TODO(jmesserly): remove this when we can extend Element for real. | |
| 155 _nodeOrCustom(node) => node is Element ? node.xtag : node; | |
| 156 | |
| 157 /** True if and only if [tokens] is of the form `['', path, '']`. */ | 152 /** True if and only if [tokens] is of the form `['', path, '']`. */ |
| 158 bool _isSimpleBinding(List<String> tokens) => | 153 bool _isSimpleBinding(List<String> tokens) => |
| 159 tokens.length == 3 && tokens[0].isEmpty && tokens[2].isEmpty; | 154 tokens.length == 3 && tokens[0].isEmpty && tokens[2].isEmpty; |
| 160 | 155 |
| 161 /** | 156 /** |
| 162 * Parses {{ mustache }} bindings. | 157 * Parses {{ mustache }} bindings. |
| 163 * | 158 * |
| 164 * Returns null if there are no matches. Otherwise returns | 159 * Returns null if there are no matches. Otherwise returns |
| 165 * [TEXT, (PATH, TEXT)+] if there is at least one mustache. | 160 * [TEXT, (PATH, TEXT)+] if there is at least one mustache. |
| 166 */ | 161 */ |
| (...skipping 27 matching lines...) Expand all Loading... |
| 194 void _addTemplateInstanceRecord(fragment, model) { | 189 void _addTemplateInstanceRecord(fragment, model) { |
| 195 if (fragment.firstChild == null) { | 190 if (fragment.firstChild == null) { |
| 196 return; | 191 return; |
| 197 } | 192 } |
| 198 | 193 |
| 199 var instanceRecord = new TemplateInstance( | 194 var instanceRecord = new TemplateInstance( |
| 200 fragment.firstChild, fragment.lastChild, model); | 195 fragment.firstChild, fragment.lastChild, model); |
| 201 | 196 |
| 202 var node = instanceRecord.firstNode; | 197 var node = instanceRecord.firstNode; |
| 203 while (node != null) { | 198 while (node != null) { |
| 204 _mdv(node)._templateInstance = instanceRecord; | 199 nodeBindFallback(node)._templateInstance = instanceRecord; |
| 205 node = node.nextNode; | 200 node = node.nextNode; |
| 206 } | 201 } |
| 207 } | 202 } |
| 208 | 203 |
| 209 | 204 |
| 210 class _TemplateIterator { | 205 class _TemplateIterator { |
| 211 final Element _templateElement; | 206 final Element _templateElement; |
| 212 final List<Node> terminators = []; | 207 final List<Node> terminators = []; |
| 213 CompoundBinding inputs; | 208 CompoundBinding inputs; |
| 214 List iteratedValue; | 209 List iteratedValue; |
| (...skipping 34 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 249 } | 244 } |
| 250 | 245 |
| 251 var splices = calculateSplices( | 246 var splices = calculateSplices( |
| 252 iteratedValue != null ? iteratedValue : [], | 247 iteratedValue != null ? iteratedValue : [], |
| 253 oldValue != null ? oldValue : []); | 248 oldValue != null ? oldValue : []); |
| 254 | 249 |
| 255 if (splices.length > 0) _handleChanges(splices); | 250 if (splices.length > 0) _handleChanges(splices); |
| 256 | 251 |
| 257 if (inputs.length == 0) { | 252 if (inputs.length == 0) { |
| 258 close(); | 253 close(); |
| 259 _mdv(_templateElement)._templateIterator = null; | 254 templateBindFallback(_templateElement)._templateIterator = null; |
| 260 } | 255 } |
| 261 } | 256 } |
| 262 | 257 |
| 263 Node getTerminatorAt(int index) { | 258 Node getTerminatorAt(int index) { |
| 264 if (index == -1) return _templateElement; | 259 if (index == -1) return _templateElement; |
| 265 var terminator = terminators[index]; | 260 var terminator = terminators[index]; |
| 266 if (terminator is Element && (terminator as Element).isTemplate && | 261 if (isSemanticTemplate(terminator) && |
| 267 !identical(terminator, _templateElement)) { | 262 !identical(terminator, _templateElement)) { |
| 268 var subIterator = _mdv(terminator)._templateIterator; | 263 var subIterator = templateBindFallback(terminator)._templateIterator; |
| 269 if (subIterator != null) { | 264 if (subIterator != null) { |
| 270 return subIterator.getTerminatorAt(subIterator.terminators.length - 1); | 265 return subIterator.getTerminatorAt(subIterator.terminators.length - 1); |
| 271 } | 266 } |
| 272 } | 267 } |
| 273 | 268 |
| 274 return terminator; | 269 return terminator; |
| 275 } | 270 } |
| 276 | 271 |
| 277 void insertInstanceAt(int index, DocumentFragment fragment, | 272 void insertInstanceAt(int index, DocumentFragment fragment, |
| 278 List<Node> instanceNodes) { | 273 List<Node> instanceNodes) { |
| (...skipping 39 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 318 } | 313 } |
| 319 | 314 |
| 320 getInstanceModel(model, BindingDelegate delegate) { | 315 getInstanceModel(model, BindingDelegate delegate) { |
| 321 if (delegate != null) { | 316 if (delegate != null) { |
| 322 return delegate.getInstanceModel(_templateElement, model); | 317 return delegate.getInstanceModel(_templateElement, model); |
| 323 } | 318 } |
| 324 return model; | 319 return model; |
| 325 } | 320 } |
| 326 | 321 |
| 327 DocumentFragment getInstanceFragment(model, BindingDelegate delegate) { | 322 DocumentFragment getInstanceFragment(model, BindingDelegate delegate) { |
| 328 return _templateElement.createInstance(model, delegate); | 323 return templateBind(_templateElement).createInstance(model, delegate); |
| 329 } | 324 } |
| 330 | 325 |
| 331 void _handleChanges(Iterable<ChangeRecord> splices) { | 326 void _handleChanges(Iterable<ChangeRecord> splices) { |
| 332 if (closed) return; | 327 if (closed) return; |
| 333 | 328 |
| 334 splices = splices.where((s) => s is ListChangeRecord); | 329 splices = splices.where((s) => s is ListChangeRecord); |
| 335 | 330 |
| 336 var template = _templateElement; | 331 var template = _templateElement; |
| 337 var delegate = template.bindingDelegate; | 332 var delegate = templateBind(template).bindingDelegate; |
| 338 | 333 |
| 339 if (template.parentNode == null || template.ownerDocument.window == null) { | 334 if (template.parentNode == null || template.ownerDocument.window == null) { |
| 340 close(); | 335 close(); |
| 341 // TODO(jmesserly): MDV calls templateIteratorTable.delete(this) here, | 336 // TODO(jmesserly): MDV calls templateIteratorTable.delete(this) here, |
| 342 // but I think that's a no-op because only nodes are used as keys. | 337 // but I think that's a no-op because only nodes are used as keys. |
| 343 // See https://github.com/Polymer/mdv/pull/114. | 338 // See https://github.com/Polymer/mdv/pull/114. |
| 344 return; | 339 return; |
| 345 } | 340 } |
| 346 | 341 |
| 347 var instanceCache = new HashMap(equals: identical); | 342 var instanceCache = new HashMap(equals: identical); |
| 348 var removeDelta = 0; | 343 var removeDelta = 0; |
| 349 for (var splice in splices) { | 344 for (var splice in splices) { |
| 350 for (int i = 0; i < splice.removedCount; i++) { | 345 for (int i = 0; i < splice.removedCount; i++) { |
| 351 var instanceNodes = extractInstanceAt(splice.index + removeDelta); | 346 var instanceNodes = extractInstanceAt(splice.index + removeDelta); |
| 352 if (instanceNodes.length == 0) continue; | 347 if (instanceNodes.length == 0) continue; |
| 353 var model = _mdv(instanceNodes.first)._templateInstance.model; | 348 var model = nodeBindFallback(instanceNodes.first) |
| 349 ._templateInstance.model; |
| 354 instanceCache[model] = instanceNodes; | 350 instanceCache[model] = instanceNodes; |
| 355 } | 351 } |
| 356 | 352 |
| 357 removeDelta -= splice.addedCount; | 353 removeDelta -= splice.addedCount; |
| 358 } | 354 } |
| 359 | 355 |
| 360 for (var splice in splices) { | 356 for (var splice in splices) { |
| 361 for (var addIndex = splice.index; | 357 for (var addIndex = splice.index; |
| 362 addIndex < splice.index + splice.addedCount; | 358 addIndex < splice.index + splice.addedCount; |
| 363 addIndex++) { | 359 addIndex++) { |
| (...skipping 24 matching lines...) Expand all Loading... |
| 388 void close() { | 384 void close() { |
| 389 if (closed) return; | 385 if (closed) return; |
| 390 | 386 |
| 391 unobserve(); | 387 unobserve(); |
| 392 inputs.close(); | 388 inputs.close(); |
| 393 terminators.clear(); | 389 terminators.clear(); |
| 394 closed = true; | 390 closed = true; |
| 395 } | 391 } |
| 396 | 392 |
| 397 static void _unbindAllRecursively(Node node) { | 393 static void _unbindAllRecursively(Node node) { |
| 398 var nodeExt = _mdv(node); | 394 var nodeExt = nodeBindFallback(node); |
| 399 nodeExt._templateInstance = null; | 395 nodeExt._templateInstance = null; |
| 400 if (node is Element && (node as Element).isTemplate) { | 396 if (isSemanticTemplate(node)) { |
| 401 // Make sure we stop observing when we remove an element. | 397 // Make sure we stop observing when we remove an element. |
| 402 var templateIterator = nodeExt._templateIterator; | 398 var templateIterator = nodeExt._templateIterator; |
| 403 if (templateIterator != null) { | 399 if (templateIterator != null) { |
| 404 templateIterator.close(); | 400 templateIterator.close(); |
| 405 nodeExt._templateIterator = null; | 401 nodeExt._templateIterator = null; |
| 406 } | 402 } |
| 407 } | 403 } |
| 408 | 404 |
| 409 _nodeOrCustom(node).unbindAll(); | 405 nodeBind(node).unbindAll(); |
| 410 for (var c = node.firstChild; c != null; c = c.nextNode) { | 406 for (var c = node.firstChild; c != null; c = c.nextNode) { |
| 411 _unbindAllRecursively(c); | 407 _unbindAllRecursively(c); |
| 412 } | 408 } |
| 413 } | 409 } |
| 414 } | 410 } |
| OLD | NEW |