| OLD | NEW |
| 1 // Copyright (c) 2014, the Dart project authors. Please see the AUTHORS file | 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 | 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. | 3 // BSD-style license that can be found in the LICENSE file. |
| 4 | 4 |
| 5 library polymer.auto_binding; | 5 library polymer.auto_binding; |
| 6 | 6 |
| 7 import 'dart:html'; | 7 import 'dart:html'; |
| 8 import 'package:polymer/polymer.dart'; | 8 import 'package:polymer/polymer.dart'; |
| 9 import 'package:template_binding/template_binding.dart'; | 9 import 'package:template_binding/template_binding.dart'; |
| 10 | 10 |
| 11 /** | 11 /** |
| 12 * The `auto-binding-dart` element extends the template element. It provides a | 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 | 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 | 14 * delegate or use the [templateBind] call. Both data and event handlers can be |
| 15 * bound using the [model]. | 15 * bound using the [model]. |
| 16 * | 16 * |
| 17 * The `auto-binding-dart` element acts just like a template that is bound to | 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 | 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. | 19 * content is stamped, the `template-bound` event is fired. |
| 20 * | 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 * |
| 21 * Example: | 27 * Example: |
| 22 * | 28 * |
| 23 * <template is="auto-binding-dart"> | 29 * <template id="my-template" is="auto-binding-dart"> |
| 24 * <div>Say something: <input value="{{value}}"></div> | 30 * <div>Say something: <input value="{{value}}"></div> |
| 25 * <div>You said: {{value}}</div> | 31 * <div>You said: {{value}}</div> |
| 26 * <button on-tap="{{buttonTap}}">Tap me!</button> | 32 * <button on-tap="{{buttonTap}}">Tap me!</button> |
| 27 * </template> | 33 * </template> |
| 28 * <script type="application/dart"> | 34 * <script type="application/dart"> |
| 29 * import 'dart:html'; | 35 * import 'dart:html'; |
| 30 * import 'package:polymer/polymer.dart'; | 36 * import 'package:polymer/polymer.dart'; |
| 31 * | 37 * |
| 32 * main() { | 38 * main() { |
| 33 * var template = document.querySelector('template'); | 39 * var template = document.querySelector('#my-template'); |
| 34 * template.model = new MyModel(); | 40 * template.model = new MyModel(); |
| 35 * } | 41 * } |
| 36 * | 42 * |
| 37 * class MyModel { | 43 * class MyModel { |
| 38 * String value = 'something'; | 44 * String value = 'something'; |
| 39 * buttonTap() => console.log('tap!'); | 45 * buttonTap() => console.log('tap!'); |
| 40 * } | 46 * } |
| 41 * </script> | 47 * </script> |
| 42 * | 48 * |
| 43 */ | 49 */ |
| (...skipping 54 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 98 } | 104 } |
| 99 } | 105 } |
| 100 | 106 |
| 101 // Dart note: this is implemented a little differently to keep it in classic | 107 // Dart note: this is implemented a little differently to keep it in classic |
| 102 // OOP style. Instead of monkeypatching findController, override it. | 108 // OOP style. Instead of monkeypatching findController, override it. |
| 103 class _AutoBindingSyntax extends PolymerExpressions { | 109 class _AutoBindingSyntax extends PolymerExpressions { |
| 104 final AutoBindingElement _node; | 110 final AutoBindingElement _node; |
| 105 _AutoBindingSyntax(this._node) : super(); | 111 _AutoBindingSyntax(this._node) : super(); |
| 106 @override findController(_) => _node; | 112 @override findController(_) => _node; |
| 107 } | 113 } |
| OLD | NEW |