jakemac53/index.dart Secret

## index.dart
import 'package:polymer/polymer.dart';
export 'package:polymer/init.dart';

@PolymerRegister('hello-element')
class HelloElement extends PolymerElement {
  HelloElement.created() : super.created();

  @property
  List<User> data = [
    new User('John', 'Smith'),
    new User('Hannah', 'Smith'),
  ];
}

@PolymerRegister('table-element')
class TableElement extends PolymerElement {
  TableElement.created() : super.created();
}

@PolymerRegister('row-element')
class RowElement extends PolymerElement {
  RowElement.created() : super.created();

  @property
  User user;
}

class User extends JsProxy {
  @reflectable
  final String first;
  @reflectable
  final String last;

  User(this.first, this.last);
}

## index.html
<!DOCYTYPE html>
<head>
  <script src="packages/web_components/webcomponents-lite.js"></script>
  <script type="application/dart" src="dom_repeat.dart"></script>
  <script src="packages/browser/dart.js"></script>
</head>
<body>

  <dom-module id="hello-element">
    <template>
      <table-element>
        <template is="dom-repeat" items="{{data}}">
          <row-element user="{{item}}">
          </row-element>
        </template>
        </tbody>
      </table-element>
    </template>
  </dom-module>

  <dom-module id="table-element">
    <template>
      <style>
        :host {
          display: table;
        }
      </style>
      <tr>
        <th>first</th><th>last</th>
      </tr>
      <content></content>
    </template>
  </dom-module>


  <dom-module id="row-element">
    <template>
      <style>
        :host {
          display: table-row;
        }
        div {
          display: table-cell;
          padding: 1px 4px;
        }
      </style>
      <template is="dom-if" if="{{user}}">
        <div>{{user.first}}</div>
        <div>{{user.last}}</div>
      </template>
    </template>
  </dom-module>

  <hello-element></hello-element>
</body>
	import 'package:polymer/polymer.dart';
	export 'package:polymer/init.dart';

	@PolymerRegister('hello-element')
	class HelloElement extends PolymerElement {
	HelloElement.created() : super.created();

	@property
	List<User> data = [
	new User('John', 'Smith'),
	new User('Hannah', 'Smith'),
	];
	}

	@PolymerRegister('table-element')
	class TableElement extends PolymerElement {
	TableElement.created() : super.created();
	}

	@PolymerRegister('row-element')
	class RowElement extends PolymerElement {
	RowElement.created() : super.created();

	@property
	User user;
	}

	class User extends JsProxy {
	@reflectable
	final String first;
	@reflectable
	final String last;

	User(this.first, this.last);
	}
	<!DOCYTYPE html>
	<head>
	<script src="packages/web_components/webcomponents-lite.js"></script>
	<script type="application/dart" src="dom_repeat.dart"></script>
	<script src="packages/browser/dart.js"></script>
	</head>
	<body>

	<dom-module id="hello-element">
	<template>
	<table-element>
	<template is="dom-repeat" items="{{data}}">
	<row-element user="{{item}}">
	</row-element>
	</template>
	</tbody>
	</table-element>
	</template>
	</dom-module>

	<dom-module id="table-element">
	<template>
	<style>
	:host {
	display: table;
	}
	</style>
	<tr>
	<th>first</th><th>last</th>
	</tr>
	<content></content>
	</template>
	</dom-module>


	<dom-module id="row-element">
	<template>
	<style>
	:host {
	display: table-row;
	}
	div {
	display: table-cell;
	padding: 1px 4px;
	}
	</style>
	<template is="dom-if" if="{{user}}">
	<div>{{user.first}}</div>
	<div>{{user.last}}</div>
	</template>
	</template>
	</dom-module>

	<hello-element></hello-element>
	</body>