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

【问题标题】：Dart-Polymer: Create a polymer element with varying css in each rowDart-Polymer：在每一行中创建一个具有不同 css 的聚合物元素
【发布时间】：2014-07-09 00:33:20
【问题描述】：

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

void highlightRows(){

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

}

仅适用于“已批准”的行我希望聚合物元素适用于“已拒绝”和“无”的行。不胜感激。

【问题讨论】：

标签： dart dart-polymer

【解决方案1】：

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

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

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

index.html

<!DOCTYPE html>

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

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

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

【讨论】：

【解决方案2】：

[移动这个答案from the previous thread 作为冈特回答的另一个例子]

这是一个使用 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);

}

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

【讨论】：