Bind table with dynamic rows and columns from two lists - dart

Question

I'm trying to create a family-calendar style app that has a table with names of persons as columns and dates as rows. Not sure how to do this but this is what I have so far:
calendartable.html
<polymer-element name="calendar-table">
<template>
<table>
<tr template repeat="{{dates}}">
<td template repeat="{{people}}">{{name}}</td>
</tr>
</table>
</template>
<script type="application/dart" src="calendartable.dart"></script>
</polymer-element>
calendartable.dart
import 'package:polymer/polymer.dart';
class Person
{
String name;
Person(this.name);
}
#CustomTag('calendar-table')
class CalendarTable extends PolymerElement {
List people = [new Person("Kalle"), new Person("Olle")];
List dates = [new DateTime(2013, 09, 09), new DateTime(2013, 09, 10)];
}
Some questions about the above:
The above code does not work, "Uncaught Error: EvalException: variable not found: people in 193757919". Is this due to this bug or am I doing something else wrong?
Is there another way to create tables with both dynamic rows and columns? Maybe some workaround if the bug is affecting my code?
Is there any docs about using "template" as an attribute rather than an element? (Just saw some other code that used it as an attribute and it seems to work but cannot find any official docs)
UPDATE:
The output I am looking for is something like this. (I plan to add content for the "X" in the cells once I have the basic layout rendering correctly):
+------------+-------+------+
| | Kalle | Olle |
+------------+-------|------+
| 2013-09-09 | X | X |
+------------+-------+------+
| 2013-09-10 | X | X |
+------------+-------+------+
UPDATE:
This is what I ended up with that works (thanks to ianmjones for pointing me in the right direction!):
calendartable.html
<polymer-element name="calendar-table">
<template>
<table>
<tr>
<td></td>
<template repeat="{{person in people}}">
<td>{{person.name}}</td>
</template>
</tr>
<template repeat="{{date in dates}}">
<tr>
<td>{{date.toString()}}</td>
<template repeat="{{person in people}}">
<td>X</td>
</template>
</tr>
</template>
</table>
</template>
<script type="application/dart" src="calendartable.dart"></script>
</polymer-element>

Answer 1

I think this is what you want, or at least will get you closer.
<polymer-element name="calendar-table">
<template>
<table>
<template repeat="{{date in dates}}">
<tr>
<td>{{date.toString()}}</td>
<template repeat="{{person in people}}">
<td>{{person.name}}</td>
</template>
</tr>
</template>
</table>
</template>
<script type="application/dart" src="calendartable.dart"></script>
</polymer-element>
This should give you as many rows as there are dates, first column is date (needs some formatting), next columns contain name of each person.
e.g:
2013-09-09 00:00:00.000 Kalle Olle
2013-09-10 00:00:00.000 Kalle Olle

Answer 2

This answer no longer applies after the question was updated.
I am not sure how your table cells are laid out. In your implementation, for example, there is no place to output the date value.
Assuming I haven't completely misunderstood the layout you want, you could rewrite your element <template> content as follows:
<polymer-element name="calendar-table">
<template>
<table>
<tr>
<td template repeat="{{people}}">{{name}}</td>
</tr>
<tr>
<td template repeat="{{dates}}">{{}}</td>
</tr>
</table>
</template>
<script type="application/dart" src="calendartable.dart"></script>
</polymer-element>
That would put the 2 names in the first row, and the two dates in the second row (if that is in fact what you want).