dart - polymer 表中的模板重复动态对象

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

来自测试元素的属性值:

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 镜填充行，现在行 [field] 工作正常，因为我正在阅读 map 。

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

有什么办法可以创建自定义表达式来处理反射逻辑并将其用于 polymer 元素..？

Answer 1

你应该做cols和 fields可通过 toObservable([]) 观察就像你对 rows 所做的那样因此 View 会收到有关更新的通知。
如果值是静态的，这可能不是必需的，但是您必须确保为这些值分配了 之前 绑定(bind)被评估( enteredView() attached() 之后 super.enteredView() super.attached() 调用肯定迟到了(在你的情况下，'数据'还没有设置，所以你应该使用 toObservable() 。
我认为回调方法polymerCreated (在 super.polymerCreated() 调用之前应该工作。

我猜不是{{row.field}}你想要{{row[field]}}
如果它仍然不起作用，请添加评论，我会寻找其他原因。