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 `d-auto-binding` 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 `d-auto-binding` 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 * Example: |
| 22 * |
| 23 * <template is="d-auto-binding"> |
| 24 * <div>Say something: <input value="{{value}}"></div> |
| 25 * <div>You said: {{value}}</div> |
| 26 * <button on-tap="{{buttonTap}}">Tap me!</button> |
| 27 * </template> |
| 28 * <script type="application/dart"> |
| 29 * import 'dart:html'; |
| 30 * import 'package:polymer/polymer.dart'; |
| 31 * |
| 32 * main() { |
| 33 * var template = document.querySelector('template'); |
| 34 * template.model = new MyModel(); |
| 35 * } |
| 36 * |
| 37 * class MyModel { |
| 38 * String value = 'something'; |
| 39 * buttonTap() => console.log('tap!'); |
| 40 * } |
| 41 * </script> |
| 42 * |
| 43 */ |
| 44 // Dart note: renamed to d-auto-binding to avoid conflict with JS auto-binding. |
| 45 class AutoBindingElement extends TemplateElement with Polymer, Observable |
| 46 implements TemplateBindExtension { |
| 47 |
| 48 /// Make template_binding "extension methods" friendly. |
| 49 /// Note that [NodeBindExtension] is already implemented by [Polymer]. |
| 50 TemplateBindExtension _self; |
| 51 |
| 52 get model => _self.model; |
| 53 set model(value) { _self.model = value; } |
| 54 |
| 55 BindingDelegate get bindingDelegate => _self.bindingDelegate; |
| 56 set bindingDelegate(BindingDelegate value) { _self.bindingDelegate = value; } |
| 57 |
| 58 void clear() => _self.clear(); |
| 59 |
| 60 @override |
| 61 PolymerExpressions get syntax => bindingDelegate; |
| 62 |
| 63 AutoBindingElement.created() : super.created() { |
| 64 polymerCreated(); |
| 65 |
| 66 _self = templateBindFallback(this); |
| 67 |
| 68 bindingDelegate = makeSyntax(); |
| 69 |
| 70 // delay stamping until polymer-ready so that auto-binding is not |
| 71 // required to load last. |
| 72 Polymer.onReady.then((_) { |
| 73 attributes['bind'] = ''; |
| 74 // we don't bother with an explicit signal here, we could ust a MO |
| 75 // if necessary |
| 76 async((_) { |
| 77 // note: this will marshall *all* the elements in the parentNode |
| 78 // rather than just stamped ones. We'd need to use createInstance |
| 79 // to fix this or something else fancier. |
| 80 marshalNodeReferences(parentNode); |
| 81 // template stamping is asynchronous so stamping isn't complete |
| 82 // by polymer-ready; fire an event so users can use stamped elements |
| 83 fire('template-bound'); |
| 84 }); |
| 85 }); |
| 86 } |
| 87 |
| 88 PolymerExpressions makeSyntax() => new _AutoBindingSyntax(this); |
| 89 |
| 90 DocumentFragment createInstance([model, BindingDelegate delegate]) => |
| 91 _self.createInstance(model, delegate); |
| 92 } |
| 93 |
| 94 // Dart note: this is implemented a little differently to keep it in classic |
| 95 // OOP style. Instead of monkeypatching findController, we override |
| 96 // getEventHandler to do the right thing. |
| 97 class _AutoBindingSyntax extends PolymerExpressions { |
| 98 final AutoBindingElement _node; |
| 99 |
| 100 _AutoBindingSyntax(this._node) : super(); |
| 101 |
| 102 EventListener getEventHandler(controller, target, String method) => (e) { |
| 103 if (controller == null || controller is! Polymer) controller = _node; |
| 104 |
| 105 if (controller is Polymer) { |
| 106 var args = [e, e.detail, e.currentTarget]; |
| 107 |
| 108 // Dart note: make sure we dispatch to the model, not the |
| 109 // AutoBindingElement instance. |
| 110 var obj = controller == _node ? _node.model : controller; |
| 111 controller.dispatchMethod(obj, method, args); |
| 112 } else { |
| 113 throw new StateError('controller $controller is not a ' |
| 114 'Dart polymer-element.'); |
| 115 } |
| 116 }; |
| 117 } |
OLD | NEW |