0

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

日历表.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>

日历表.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)];

}

关于上面的一些问题：

  1. 上面的代码不起作用，“Uncaught Error: EvalException: variable not found: people in 193757919”。这是由于这个错误还是我做错了什么？
  2. 是否有另一种方法来创建具有动态行和列的表？如果错误影响我的代码，也许有一些解决方法？
  3. 有没有关于使用“模板”作为属性而不是元素的文档？（刚刚看到其他一些将其用作属性的代码，它似乎可以工作，但找不到任何官方文档）

更新：

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

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

更新：

这就是我最终得到的结果（感谢 ianmjones 为我指明了正确的方向！）：

日历表.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>
4

2 回答 2

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>

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

例如：

2013-09-09 00:00:00.000 Kalle   Olle
2013-09-10 00:00:00.000 Kalle   Olle
于 2013-09-10T14:22:25.583 回答
0

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

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

假设我没有完全误解你想要的布局，你可以重写你的元素<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 个名称放在第一行，将两个日期放在第二行（如果这实际上是您想要的）。

于 2013-09-10T01:51:45.877 回答