Question

我想构建一个由表格组成的聚合物元素，其行CSS根据特定数据而变化，我在这里得到了一些帮助来实现类似于dart的东西，但我正在探索使用a的选项。聚合物元素。飞镖的实施有：

void highlightRows(){

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

}

仅适用于具有＆＃34;已批准＆＃34;的行。我喜欢聚合物元素来迎合那些已经被拒绝的行＃34;和＆＃34;无＆＃34;。我很欣赏一些指示。

Answer 1

修改
我用一个我刚试过的例子更新了代码我使用DartEditor dev通道和Polymer 0.10.0-pre.12
编辑结束

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

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

<强>的index.html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Sample app</title>  <link rel="import" href="packages/polymer/polymer.html"> <link rel="import" href="test_element.html"> </head> <body> <h1>TestPolymer</h1> <p>Sort observable</p> <test-element></test-element> </body> </html>

<强> test_element.html

<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"></script> </polymer-element>

<强> test_element.dart

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'); } }

Answer 2

[移动此答案from the previous thread作为Gunter答案的另一个例子]

这是一个使用Polymer-Element来显示表格的示例（you can also use data-binding without creating a polymer element according to the doc，但我不知道它是否适用于dart）：

<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 是聚合物元素代码中特定模型对象的列表，如下所示：

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

}

然后你必须在任何你想要的地方导入自定义元素，并从外面设置它的数据上下文。

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

2 个答案: