public
Created

  • Download Gist
words.dart
Dart
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68
<!DOCTYPE html>
 
<html>
<head>
<meta charset="utf-8">
<title>Sample app</title>
<link rel="stylesheet" href="words.css">
 
<!-- This is the bootstrap script for Polymer.
Use this INSTEAD of dart.js -->
<script src="packages/polymer/boot.js"></script>
</head>
<body>
<h1>Words</h1>
 
<p>Hello world from Dart!</p>
<polymer-element name="word-element" attributes="chars">
<template>
<h2>Drag and drop the letters to form anagrams</h2>
<div id='container'>
<div class="char" draggable="true">a</div>
<div class="char" draggable="true">b</div>
<div class="char" draggable="true">c</div>
<br>
<br>
<template repeat="{{chars}}">
<div class="char" draggable="true">{{}}</div>
</template>
</div>
</template>
<script type="application/dart">
import 'package:polymer/polymer.dart';
import 'dart:html';
import 'dart:async';
 
@CustomTag("word-element")
class WordElement extends PolymerElement with ObservableMixin {
@observable List chars;
 
inserted() {
Timer.run(() {
var charDivs = this.shadowRoot.queryAll('.char');
print(charDivs.length);
});
}
 
}
 
</script>
</polymer-element>
 
 
<div id="sample_container_id">
<template id="tmpl" bind>
<word-element chars="{{}}"></word-element>
 
</template>
</div>
 
<script type="application/dart">
import 'dart:html';
 
main() {
query('#tmpl').model = ['d','e','f'];
}
</script>
</body>
</html>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.