Index: pkg/polymer/lib/auto_binding.dart |
diff --git a/pkg/polymer/lib/auto_binding.dart b/pkg/polymer/lib/auto_binding.dart |
new file mode 100644 |
index 0000000000000000000000000000000000000000..44dc1ca41818b7179567805199cdccf121a0e092 |
--- /dev/null |
+++ b/pkg/polymer/lib/auto_binding.dart |
@@ -0,0 +1,117 @@ |
+// Copyright (c) 2014, the Dart project authors. Please see the AUTHORS file |
+// for details. All rights reserved. Use of this source code is governed by a |
+// BSD-style license that can be found in the LICENSE file. |
+ |
+library polymer.auto_binding; |
+ |
+import 'dart:html'; |
+import 'package:polymer/polymer.dart'; |
+import 'package:template_binding/template_binding.dart'; |
+ |
+/** |
+ * The `d-auto-binding` element extends the template element. It provides a |
+ * quick and easy way to do data binding without the need to setup a binding |
+ * delegate or use the [templateBind] call. Both data and event handlers can be |
+ * bound using the [model]. |
+ * |
+ * The `d-auto-binding` element acts just like a template that is bound to |
+ * a model. It stamps its content in the dom adjacent to itself. When the |
+ * content is stamped, the `template-bound` event is fired. |
+ * |
+ * Example: |
+ * |
+ * <template is="d-auto-binding"> |
+ * <div>Say something: <input value="{{value}}"></div> |
+ * <div>You said: {{value}}</div> |
+ * <button on-tap="{{buttonTap}}">Tap me!</button> |
+ * </template> |
+ * <script type="application/dart"> |
+ * import 'dart:html'; |
+ * import 'package:polymer/polymer.dart'; |
+ * |
+ * main() { |
+ * var template = document.querySelector('template'); |
+ * template.model = new MyModel(); |
+ * } |
+ * |
+ * class MyModel { |
+ * String value = 'something'; |
+ * buttonTap() => console.log('tap!'); |
+ * } |
+ * </script> |
+ * |
+ */ |
+// Dart note: renamed to d-auto-binding to avoid conflict with JS auto-binding. |
+class AutoBindingElement extends TemplateElement with Polymer, Observable |
+ implements TemplateBindExtension { |
+ |
+ /// Make template_binding "extension methods" friendly. |
+ /// Note that [NodeBindExtension] is already implemented by [Polymer]. |
+ TemplateBindExtension _self; |
+ |
+ get model => _self.model; |
+ set model(value) { _self.model = value; } |
+ |
+ BindingDelegate get bindingDelegate => _self.bindingDelegate; |
+ set bindingDelegate(BindingDelegate value) { _self.bindingDelegate = value; } |
+ |
+ void clear() => _self.clear(); |
+ |
+ @override |
+ PolymerExpressions get syntax => bindingDelegate; |
+ |
+ AutoBindingElement.created() : super.created() { |
+ polymerCreated(); |
+ |
+ _self = templateBindFallback(this); |
+ |
+ bindingDelegate = makeSyntax(); |
+ |
+ // delay stamping until polymer-ready so that auto-binding is not |
+ // required to load last. |
+ Polymer.onReady.then((_) { |
+ attributes['bind'] = ''; |
+ // we don't bother with an explicit signal here, we could ust a MO |
+ // if necessary |
+ async((_) { |
+ // note: this will marshall *all* the elements in the parentNode |
+ // rather than just stamped ones. We'd need to use createInstance |
+ // to fix this or something else fancier. |
+ marshalNodeReferences(parentNode); |
+ // template stamping is asynchronous so stamping isn't complete |
+ // by polymer-ready; fire an event so users can use stamped elements |
+ fire('template-bound'); |
+ }); |
+ }); |
+ } |
+ |
+ PolymerExpressions makeSyntax() => new _AutoBindingSyntax(this); |
+ |
+ DocumentFragment createInstance([model, BindingDelegate delegate]) => |
+ _self.createInstance(model, delegate); |
+} |
+ |
+// Dart note: this is implemented a little differently to keep it in classic |
+// OOP style. Instead of monkeypatching findController, we override |
+// getEventHandler to do the right thing. |
+class _AutoBindingSyntax extends PolymerExpressions { |
+ final AutoBindingElement _node; |
+ |
+ _AutoBindingSyntax(this._node) : super(); |
+ |
+ EventListener getEventHandler(controller, target, String method) => (e) { |
+ if (controller == null || controller is! Polymer) controller = _node; |
+ |
+ if (controller is Polymer) { |
+ var args = [e, e.detail, e.currentTarget]; |
+ |
+ // Dart note: make sure we dispatch to the model, not the |
+ // AutoBindingElement instance. |
+ var obj = controller == _node ? _node.model : controller; |
+ controller.dispatchMethod(obj, method, args); |
+ } else { |
+ throw new StateError('controller $controller is not a ' |
+ 'Dart polymer-element.'); |
+ } |
+ }; |
+} |