| OLD | NEW |
| (Empty) |
| 1 // Copyright (c) 2014, 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 library polymer.auto_binding; | |
| 6 | |
| 7 import 'dart:html'; | |
| 8 import 'package:polymer/polymer.dart'; | |
| 9 import 'package:template_binding/template_binding.dart'; | |
| 10 | |
| 11 /** | |
| 12 * The `auto-binding-dart` element extends the template element. It provides a | |
| 13 * quick and easy way to do data binding without the need to setup a binding | |
| 14 * delegate or use the [templateBind] call. Both data and event handlers can be | |
| 15 * bound using the [model]. | |
| 16 * | |
| 17 * The `auto-binding-dart` element acts just like a template that is bound to | |
| 18 * a model. It stamps its content in the dom adjacent to itself. When the | |
| 19 * content is stamped, the `template-bound` event is fired. | |
| 20 * | |
| 21 * **NOTE**: It is a good idea to use an id to select these elements. During | |
| 22 * code transformation it is likely that other template elements will be | |
| 23 * inserted at the top of the body above yours, so something like | |
| 24 * querySelector('template') is likely to break when built. | |
| 25 * See http://dartbug.com/20911. | |
| 26 * | |
| 27 * Example: | |
| 28 * | |
| 29 * <template id="my-template" is="auto-binding-dart"> | |
| 30 * <div>Say something: <input value="{{value}}"></div> | |
| 31 * <div>You said: {{value}}</div> | |
| 32 * <button on-tap="{{buttonTap}}">Tap me!</button> | |
| 33 * </template> | |
| 34 * <script type="application/dart"> | |
| 35 * import 'dart:html'; | |
| 36 * import 'package:polymer/polymer.dart'; | |
| 37 * | |
| 38 * main() { | |
| 39 * var template = document.querySelector('#my-template'); | |
| 40 * template.model = new MyModel(); | |
| 41 * } | |
| 42 * | |
| 43 * class MyModel { | |
| 44 * String value = 'something'; | |
| 45 * buttonTap() => console.log('tap!'); | |
| 46 * } | |
| 47 * </script> | |
| 48 * | |
| 49 */ | |
| 50 // Dart note: renamed to avoid conflict with JS auto-binding. | |
| 51 class AutoBindingElement extends TemplateElement with Polymer, Observable | |
| 52 implements TemplateBindExtension { | |
| 53 | |
| 54 /// Make template_binding "extension methods" friendly. | |
| 55 /// Note that [NodeBindExtension] is already implemented by [Polymer]. | |
| 56 TemplateBindExtension _self; | |
| 57 | |
| 58 get model => _self.model; | |
| 59 set model(value) { | |
| 60 _self.model = value; | |
| 61 } | |
| 62 | |
| 63 BindingDelegate get bindingDelegate => _self.bindingDelegate; | |
| 64 set bindingDelegate(BindingDelegate value) { | |
| 65 _self.bindingDelegate = value; | |
| 66 } | |
| 67 | |
| 68 void clear() => _self.clear(); | |
| 69 | |
| 70 @override | |
| 71 PolymerExpressions get syntax => bindingDelegate; | |
| 72 | |
| 73 AutoBindingElement.created() : super.created() { | |
| 74 polymerCreated(); | |
| 75 | |
| 76 _self = templateBindFallback(this); | |
| 77 | |
| 78 bindingDelegate = makeSyntax(); | |
| 79 | |
| 80 // delay stamping until polymer-ready so that auto-binding is not | |
| 81 // required to load last. | |
| 82 Polymer.onReady.then((_) { | |
| 83 attributes['bind'] = ''; | |
| 84 // we don't bother with an explicit signal here, we could ust a MO | |
| 85 // if necessary | |
| 86 async((_) { | |
| 87 // note: this will marshall *all* the elements in the parentNode | |
| 88 // rather than just stamped ones. We'd need to use createInstance | |
| 89 // to fix this or something else fancier. | |
| 90 marshalNodeReferences(parentNode); | |
| 91 // template stamping is asynchronous so stamping isn't complete | |
| 92 // by polymer-ready; fire an event so users can use stamped elements | |
| 93 fire('template-bound'); | |
| 94 }); | |
| 95 }); | |
| 96 } | |
| 97 | |
| 98 PolymerExpressions makeSyntax() => new _AutoBindingSyntax(this); | |
| 99 | |
| 100 DocumentFragment createInstance([model, BindingDelegate delegate]) => | |
| 101 _self.createInstance(model, delegate); | |
| 102 | |
| 103 @override | |
| 104 dispatchMethod(obj, method, args) { | |
| 105 // Dart note: make sure we dispatch to the model, not ourselves. | |
| 106 if (identical(obj, this)) obj = model; | |
| 107 return super.dispatchMethod(obj, method, args); | |
| 108 } | |
| 109 } | |
| 110 | |
| 111 // Dart note: this is implemented a little differently to keep it in classic | |
| 112 // OOP style. Instead of monkeypatching findController, override it. | |
| 113 class _AutoBindingSyntax extends PolymerExpressions { | |
| 114 final AutoBindingElement _node; | |
| 115 _AutoBindingSyntax(this._node) : super(); | |
| 116 @override findController(_) => _node; | |
| 117 } | |
| OLD | NEW |