Question

我正在尝试创建自定义表元素，如何通过了解其字段名称来重复动态对象？

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

test element的属性值：

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>>并使用dart镜像填充行，现在row [field]工作正常，因为我只是在阅读地图。

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

有什么方法可以创建自定义表达式，它将处理反射逻辑并在聚合物元素中使用它。？

Answer 1

您应该使用cols与fields进行toObservable([])和rows观察，就像您使用enteredView()一样，以便视图获得有关更新的通知。
如果值是静态的，则可能不需要这样做，但是必须确保在> 评估绑定之前指定值 ~~attached()~~ {{1} } ~~super.enteredView()~~ super.attached()来电之后肯定会迟到（在您的情况下＆＃39;数据＆＃39;尚未设置，所以您应该使用{{1} }}。
我认为回调方法toObservable()（在polymerCreated调用之前应该有效。

我想而不是super.polymerCreated()你需要{{row.field}}

如果仍然无效，请添加评论，我会查找其他原因。

模板在聚合物表中重复动态对象

1 个答案: