飛鏢聚合物：創建一個聚合物元素與每行不同的css

我想建立一個聚合物元素組成的錶行，其行CSS取決於某些數據而變化，我在這裏得到一些幫助來實現類似的飛鏢但我正在探索使用聚合物元素的選擇。飛鏢實現了：飛鏢聚合物：創建一個聚合物元素與每行不同的css

void highlightRows(){ 

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

}

其中僅迎合那些「已批准」行，我想高分子元素，以迎合那些「拒絕」和「無」的行。我會欣賞一些指針。

來源

2014-05-20 jwesonga

編輯
我更新了我剛剛試過的一個例子的代碼。
我用DartEditor開發頻道和聚合物0.10.0-pre.12
編輯結束

我沒有嘗試的代碼，但我認爲它應該工作。你需要更多的Dart/HTML樣板來製作一個有效的聚合物元素。請參閱https://www.dartlang.org/polymer-dart/開始。

在聚合物元素中，您需要一個字段，該字段爲每個行保存一個具有值的集合。

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

來源

2014-05-20 16:40:07

我更新了我的答案。 –

[移動此答案from the previous thread如甘答覆的另外的實例]

這裏是使用Polymer-元素以示出表的例子（you can also use data-binding without creating a polymer element according to the doc，但我不知道它是否與鏢作品）：

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

}

然後你探微有任何你想要導入的自定義元素，並從外部設置其數據上下文。

來源

2014-05-20 18:53:24

飛鏢聚合物：創建一個聚合物元素與每行不同的css

回答

相關問題