Question

我正在尝试创建一个家庭日历样式的应用程序，其中包含一个人名为列，日期为行的表。不知道如何做到这一点，但这是我到目前为止：

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)];

}

关于上述问题的一些问题：

上面的代码不起作用，“未捕获错误：EvalException：找不到变量：193757919中的人”。这是由于this bug还是我做错了什么？
是否有另一种方法可以创建包含动态行和列的表格？如果错误影响了我的代码，可能会有一些解决方法吗？
是否有任何关于使用“template”作为属性而不是元素的文档？（刚刚看到一些其他代码使用它作为属性，它似乎工作但找不到任何官方文档）

更新

我正在寻找的输出是这样的。（一旦我正确地进行基本布局渲染，我计划在单元格中添加“X”的内容）：

+------------+-------+------+
|            | Kalle | Olle |
+------------+-------|------+
| 2013-09-09 |   X   |   X  |
+------------+-------+------+
| 2013-09-10 |   X   |   X  |
+------------+-------+------+

更新

这就是我最终的结果（感谢ianmjones指出我正确的方向！）：

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

我认为这就是你想要的，或者至少会让你更接近。

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

这应该为您提供与日期一样多的行，第一列是日期（需要一些格式），下一列包含每个人的姓名。

e.g：

2013-09-09 00:00:00.000 Kalle   Olle
2013-09-10 00:00:00.000 Kalle   Olle

Answer 2

问题更新后，此答案不再适用。

我不确定你的桌子是如何布置的。例如，在您的实现中，没有地方可以输出日期值。

假设我没有完全误解您想要的布局，您可以按如下方式重写元素<template>内容：

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

这会将2个名字放在第一行，而两个日期放在第二行（如果这实际上是你想要的那样）。

使用两个列表中的动态行和列绑定表

2 个答案: