Skip to content

Instantly share code, notes, and snippets.

@chrisbu

chrisbu/words.dart

Created September 8, 2013 21:00
Show Gist options
  • Save chrisbu/6488370 to your computer and use it in GitHub Desktop.
Save chrisbu/6488370 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
words.dart
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment