Chromium Code Reviews Chromium Code Reviews
Issue 12225039:
Support for observable models, fixes #259 (Closed)
Base URL: https://github.com/dart-lang/web-ui.git@master| 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 <script type="application/javascript" src="testing.js"></script> | 11 <script type="application/javascript" src="testing.js"></script> |
| 12 <style>x-greeter { display: block; }</style> | 12 <style>x-greeter { display: block; }</style> |
| 13 </head> | 13 </head> |
| 14 <body> | 14 <body> |
| 15 <element name="x-greeter" extends="div" constructor="Greeter"> | 15 <element name="x-greeter" extends="div" constructor="Greeter"> |
| 16 <template></template> | 16 <template></template> |
| 17 <script type='application/dart'> | 17 <script type='application/dart'> |
| 18 import 'package:web_ui/web_ui.dart'; | 18 import 'package:web_ui/web_ui.dart'; |
| 19 @observable | |
| 19 class Greeter extends WebComponent { | 20 class Greeter extends WebComponent { |
| 20 String greetIng; | 21 String greetIng; |
| 22 | |
| 23 // TODO(jmesserly): original test was testing for the "title" DOM | |
| 24 // property. Unfortunately it can't be observed, so we'll use | |
| 25 // a different property. | |
|
Siggi Cherem (dart-lang)
2013/02/13 19:28:54
strange, because the purpose of 'title' in this te
Jennifer Messerly
2013/02/13 20:21:20
We do have another test verifying that you can bin
| |
| 26 String title2; | |
| 27 | |
| 21 changeStuff() { | 28 changeStuff() { |
| 22 greetIng = 'Yo dawg'; | 29 greetIng = 'Yo dawg'; |
| 23 title = 'I heard you like $title so we put $title in yo $title.'; | 30 title2 = 'I heard you like $title2 so we put $title2 in yo $title2.'; |
| 24 } | 31 } |
| 25 } | 32 } |
| 26 </script> | 33 </script> |
| 27 </element> | 34 </element> |
| 28 <p> | 35 <p> |
| 29 The message changes from "hello world" to something more interesting. | 36 The message changes from "hello world" to something more interesting. |
| 30 </p> | 37 </p> |
| 31 <!-- Note: "title" is a DOM field on all elements. | 38 <!-- Note: "title" is a DOM field on all elements. |
| 32 Also this element has no rendering. --> | 39 Also this element has no rendering. --> |
| 33 <x-greeter id="greet" bind-title="data[1]" bind-greet-ing="data[0]"> | 40 <x-greeter id="greet" bind-title2="data[1]" bind-greet-ing="data[0]"> |
| 34 </x-greeter> | 41 </x-greeter> |
| 35 <p id="actual">{{data[0]}} {{data[1]}}</p> | 42 <p id="actual">{{data[0]}} {{data[1]}}</p> |
| 36 <script type="application/dart"> | 43 <script type="application/dart"> |
| 37 import 'dart:html'; | 44 import 'dart:html'; |
| 38 import 'package:unittest/unittest.dart'; | 45 import 'package:unittest/unittest.dart'; |
| 39 import 'package:web_ui/web_ui.dart'; | 46 import 'package:web_ui/web_ui.dart'; |
| 40 | 47 |
| 41 var data = ['hello', 'world']; | 48 final data = new ObservableList.from(['hello', 'world']); |
| 49 | |
| 42 main() { | 50 main() { |
| 43 window.setTimeout(() { | 51 window.setTimeout(() { |
| 44 var actual = query('#actual'); | 52 var actual = query('#actual'); |
| 45 var greet = query('#greet'); | 53 var greet = query('#greet'); |
| 46 expect(actual.innerHtml, 'hello world'); | 54 expect(actual.innerHtml, 'hello world'); |
| 47 greet.xtag.changeStuff(); | 55 greet.xtag.changeStuff(); |
| 48 dispatch(); | 56 deliverChangesSync(); |
| 49 expect(actual.innerHtml, contains('Yo dawg I heard')); | 57 expect(actual.innerHtml, contains('Yo dawg I heard')); |
| 50 window.postMessage('done', '*'); | 58 window.postMessage('done', '*'); |
| 51 }, 0); | 59 }, 0); |
| 52 } | 60 } |
| 53 </script> | 61 </script> |
| 54 </body> | 62 </body> |
| 55 </html> | 63 </html> |
| OLD | NEW |
