Dart-Polymer：创建每行中具有不同css的聚合物元素


Dart-Polymer: Create a polymer element with varying css in each row

我想构建一个由表组成的聚合物元素，该表的行CSS取决于某些数据，在这里我得到了一些帮助，以在dart中实现类似的功能，但是我正在探索使用聚合物元素的选择。 飞镖实现具有：

1
2
3
4
5
6
7
8
9
void highlightRows(){

  querySelectorAll('tr').where(
      (tr)=> tr.children.any(
               (td)=>td.text == 'Approved'
             )  
  ).forEach((approvedTr)=>approvedTr.classes.add('foo'));

}

仅满足"已批准"的行，我希望Polymer元素满足"已拒绝"和"无"的行。 我希望能得到一些指导。

[从上一个主题中移出此答案作为Gunter答案的另一个示例]

这是一个使用Polymer-Element来显示表格的示例(您也可以使用数据绑定，而无需根据doc创建聚合物元素，但是如果与dart兼容，我不知道)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<meta charset="utf-8">

<polymer-element name="myapp-request-table">
  <style>
  .Approved{
      background-color: green;
}

.Denied{
      background-color: red;
  }
  ...
  </style>

  <table id="requests">
      <template reapeat="{req in myRequestList}">
          <tr class="{{req.statut}}"> <!-- row class depends on request.statut value-->
              <td>{{req.title}}</td>
              <td>{{req.statut}}</td>
              <td>{{req.date}}</td>
          </tr>
      </template>
  </table>
</polymer-element>

要使用此html，您需要提供一个兼容的数据上下文。

在此示例中，myRequestList是在聚合物元素代码中设置的特定模型对象的列表，如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
@CustomTag('myapp-request-table')
class MyAppRequestTable extends PolymerElement{

@observable ObservableList<MyRequestClass> myRequestList = new ObservableList<MyRequestClass>(); //here is the data context

MyAppRequestTable.created() :  super.created(){
     myRequestList.addAll([new MyRequestClass('foo','denied',new DateTime.now()), new MyRequestClass('42','approved',new DateTime.now())]); //filling the data-context once the element is created
 }

}


class MyRequestClass extends Observable {

  @observable String title;

  @observable String statut;

  @observable DateTime date;

  MyRequestClass(this.title,this.statut,this.date);

}

然后，您只需将自定义元素导入所需的任何位置，然后从外部设置其数据上下文。

编辑
我使用刚刚尝试的示例更新了代码。
我使用DartEditor开发频道和Polymer 0.10.0-pre.12
编辑结束

我没有尝试该代码，但我认为它应该可以工作。
您需要更多Dart / HTML样板来制作可工作的Polymer元素。
请参阅https://www.dartlang.org/polymer-dart/以开始使用。

在Polymer元素中，您需要一个字段，其中包含一个集合，每一行都有一个值。

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    Sample app

    <!-- import the test-element -->

    <link rel="import" href="packages/polymer/polymer.html">
    <link rel="import" href="test_element.html">
  </head>
  <body>
    TestPolymer

    <p>
Sort observable
</p>

    <test-element></test-element>

  </body>
</html>

test_element.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<polymer-element name="test-element">
  <template>
    <style>
      tr.foo {
        background-color: #00ff00;
      }
    </style>
    <table>
      <tr template repeat="{{row in rows}}" class="{{ {'foo': row.contains('Approved')} }}">
        <td template repeat="{{cell in row}}">{{cell}}</td>
      </tr>
    </table>
  </template>
  <script type="application/dart" src="test_element.dart">
</polymer-element>

test_element.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
library test_element;

import 'dart:async';
import 'package:polymer/polymer.dart';

@CustomTag('test-element')
class PeopleElement extends PolymerElement {

  List<List<String>> rows = toObservable( // toObservable allows to update the HTML itself when the list content changes
  [
    ['Row1-cell1', 'Row1-cell1', 'Row1-cell3', 'Approved'],
    ['Row2-cell1', 'Approved', 'Row2-cell3', 'Row2-cell4'],
    ['Approved', 'Row3-cell2', 'Row3-cell3', 'Row3-cell4'],
    ['Row4-cell1', 'Row4-cell2', 'Row4-cell3', 'Row4-cell4']
  ]);

  PeopleElement.created() : super.created() {
    print('PeopleElement');
  }
}