Chromium Code Reviews| 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 * Example: | 21 * Example: |
| 22 * | 22 * |
| 23 * <template is="auto-binding-dart"> | 23 * <template id="my-template" is="auto-binding-dart"> |
| 24 * <div>Say something: <input value="{{value}}"></div> | 24 * <div>Say something: <input value="{{value}}"></div> |
| 25 * <div>You said: {{value}}</div> | 25 * <div>You said: {{value}}</div> |
| 26 * <button on-tap="{{buttonTap}}">Tap me!</button> | 26 * <button on-tap="{{buttonTap}}">Tap me!</button> |
| 27 * </template> | 27 * </template> |
| 28 * <script type="application/dart"> | 28 * <script type="application/dart"> |
| 29 * import 'dart:html'; | 29 * import 'dart:html'; |
| 30 * import 'package:polymer/polymer.dart'; | 30 * import 'package:polymer/polymer.dart'; |
| 31 * | 31 * |
| 32 * main() { | 32 * main() { |
| 33 * var template = document.querySelector('template'); | 33 * var template = document.querySelector('#my-template'); |
|
Siggi Cherem (dart-lang)
2014/09/11 15:44:22
might be worth mentioning in the example that usin
| |
| 34 * template.model = new MyModel(); | 34 * template.model = new MyModel(); |
| 35 * } | 35 * } |
| 36 * | 36 * |
| 37 * class MyModel { | 37 * class MyModel { |
| 38 * String value = 'something'; | 38 * String value = 'something'; |
| 39 * buttonTap() => console.log('tap!'); | 39 * buttonTap() => console.log('tap!'); |
| 40 * } | 40 * } |
| 41 * </script> | 41 * </script> |
| 42 * | 42 * |
| 43 */ | 43 */ |
| (...skipping 54 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 98 } | 98 } |
| 99 } | 99 } |
| 100 | 100 |
| 101 // Dart note: this is implemented a little differently to keep it in classic | 101 // Dart note: this is implemented a little differently to keep it in classic |
| 102 // OOP style. Instead of monkeypatching findController, override it. | 102 // OOP style. Instead of monkeypatching findController, override it. |
| 103 class _AutoBindingSyntax extends PolymerExpressions { | 103 class _AutoBindingSyntax extends PolymerExpressions { |
| 104 final AutoBindingElement _node; | 104 final AutoBindingElement _node; |
| 105 _AutoBindingSyntax(this._node) : super(); | 105 _AutoBindingSyntax(this._node) : super(); |
| 106 @override findController(_) => _node; | 106 @override findController(_) => _node; |
| 107 } | 107 } |
| OLD | NEW |