0

人の名前を列、日付を行とするテーブルを持つ家族カレンダー スタイルのアプリを作成しようとしています。これを行う方法はわかりませんが、これは私がこれまでに持っているものです：

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

}

上記に関するいくつかの質問：

  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に感謝します！）：

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>
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 に答える