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 |