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 model. | |
14 * The `d-auto-binding` element itself serves as the model and controller for | |
15 * the elements it contains. Both data and event handlers can be bound. | |
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"> | |
Jennifer Messerly
2014/05/30 19:50:20
note: name had to be changed to avoid conflict :/
| |
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 BindingDelegate 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 |