Я пытаюсь создать собственный элемент таблицы, как я могу повторить динамический объект, зная его имена полей?
<tr template repeat="{{row in rows}}">
<td template repeat="{{field in fields}}">
{{row.field}}
</td>
</tr>
table_elemnet.html
<polymer-element name = "table-element" attributes ="structure data">
<template>
<table class="bordered" id="table_element">
<tr>
<th template repeat="{{col in cols}}">
{{col}}
</th>
</tr>
<tr template repeat="{{row in rows}}">
<td template repeat="{{field in fields}}">
{{row.field}}
</td>
</tr>
</table>
</template>
<script type="application/dart" src="table_element.dart"></script>
</polymer-element>
table_element.dart
import "package:polymer/polymer.dart";
/**
* Custom table element
*
*/
@CustomTag("table-element")
class Table extends PolymerElement {
@published List<Map<String,String>> structure; // table struture column name and value factory
@published List<dynamic> data; // table data
@observable List<dynamic> rows = toObservable([]);
@observable List<String> cols = [];
@observable List<String> fields = [];
static const COLUMN_NAME = "columnName";
static const FIELD_NAME = "fieldName";
Table.created():super.created();
void enteredView() {
super.enteredView();
structure.forEach((map) { cols.add(map[COLUMN_NAME]); fields.add(map[FIELD_NAME]);}); // populate columns and fields from table
rows.addAll(data);
}
}
Значения атрибутов из тестового элемента:
List<People> data = [new People("name1","name2"),new People("name2","name4")];
List<Map<String,String>> structure = [{ "columnName" : "First Name", "fieldName" : "fname"},
{"columnName" : "Last Name", "fieldName" : "lname"}];
В браузере я могу видеть имена столбцов, но не данные.
Изменить:
Я изменил тип строк на List<Map<String,dynamic>>
и заполнил строки с помощью зеркал дротика, теперь строка [поле] работает нормально, так как я просто читаю карту.
if(data != null) {
data.forEach((element) { // kind of hackish dynamic object iteration
Map row ={};
fields.forEach((field) {
row[field] = reflect(element).getField(new Symbol(field)).reflectee;} );
rows.add(row);
});
}
есть ли способ создать пользовательское выражение, которое позаботится о логике отражения и использует его в полимерных элементах?