Index: observatory_pub_packages/polymer/auto_binding.dart |
=================================================================== |
--- observatory_pub_packages/polymer/auto_binding.dart (revision 0) |
+++ observatory_pub_packages/polymer/auto_binding.dart (working copy) |
@@ -0,0 +1,113 @@ |
+// 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 `auto-binding-dart` 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 `auto-binding-dart` 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. |
+ * |
+ * **NOTE**: It is a good idea to use an id to select these elements. During |
+ * code transformation it is likely that other template elements will be |
+ * inserted at the top of the body above yours, so something like |
+ * querySelector('template') is likely to break when built. |
+ * See http://dartbug.com/20911. |
+ * |
+ * Example: |
+ * |
+ * <template id="my-template" is="auto-binding-dart"> |
+ * <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('#my-template'); |
+ * template.model = new MyModel(); |
+ * } |
+ * |
+ * class MyModel { |
+ * String value = 'something'; |
+ * buttonTap() => console.log('tap!'); |
+ * } |
+ * </script> |
+ * |
+ */ |
+// Dart note: renamed 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); |
+ |
+ @override |
+ dispatchMethod(obj, method, args) { |
+ // Dart note: make sure we dispatch to the model, not ourselves. |
+ if (identical(obj, this)) obj = model; |
+ return super.dispatchMethod(obj, method, args); |
+ } |
+} |
+ |
+// Dart note: this is implemented a little differently to keep it in classic |
+// OOP style. Instead of monkeypatching findController, override it. |
+class _AutoBindingSyntax extends PolymerExpressions { |
+ final AutoBindingElement _node; |
+ _AutoBindingSyntax(this._node) : super(); |
+ @override findController(_) => _node; |
+} |