| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <!-- | 2 <!-- |
| 3 Copyright (c) 2012, the Dart project authors. Please see the AUTHORS file | 3 Copyright (c) 2012, the Dart project authors. Please see the AUTHORS file |
| 4 for details. All rights reserved. Use of this source code is governed by a | 4 for details. All rights reserved. Use of this source code is governed by a |
| 5 BSD-style license that can be found in the LICENSE file. | 5 BSD-style license that can be found in the LICENSE file. |
| 6 --> | 6 --> |
| 7 <html lang="en"> | 7 <html lang="en"> |
| 8 <head> | 8 <head> |
| 9 <meta charset="utf-8"> | 9 <meta charset="utf-8"> |
| 10 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | 10 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
| 11 <link rel="stylesheet" | 11 <link rel="stylesheet" |
| 12 href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css"> | 12 href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css"> |
| 13 </head> | 13 </head> |
| 14 <body> | 14 <body> |
| 15 <element name="x-click-counter" constructor="CounterComponent" extends="div"> | 15 <element name="x-click-counter" constructor="CounterComponent" extends="div"> |
| 16 <template> | 16 <template> |
| 17 <div> | 17 <div> |
| 18 <button on-click="increment()">Click me</button> | 18 <button on-click="increment()">Click me</button> |
| 19 <span>(click count: {{count}})</span> | 19 <span>(click count: {{count}})</span> |
| 20 </div> | 20 </div> |
| 21 </template> | 21 </template> |
| 22 <script type="application/dart"> | 22 <script type="application/dart"> |
| 23 import 'package:web_components/web_components.dart'; | 23 import 'package:web_ui/web_ui.dart'; |
| 24 | 24 |
| 25 class CounterComponent extends WebComponent { | 25 class CounterComponent extends WebComponent { |
| 26 int count = 0; | 26 int count = 0; |
| 27 void increment() { count++; } | 27 void increment() { count++; } |
| 28 } | 28 } |
| 29 </script> | 29 </script> |
| 30 </element> | 30 </element> |
| 31 <div class="well"> | 31 <div class="well"> |
| 32 <div is="x-click-counter" count="{{myNumber}}"></div> | 32 <div is="x-click-counter" count="{{myNumber}}"></div> |
| 33 <div is="x-click-counter" count="{{5}}"></div> | 33 <div is="x-click-counter" count="{{5}}"></div> |
| 34 </div> | 34 </div> |
| 35 <script type="application/dart"> | 35 <script type="application/dart"> |
| 36 int myNumber = 12; | 36 int myNumber = 12; |
| 37 main(){} | 37 main(){} |
| 38 </script> | 38 </script> |
| 39 </body> | 39 </body> |
| 40 </html> | 40 </html> |
| OLD | NEW |