chrisbu/words.dart

## 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>
	<!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>