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

我想创建自定义表格元素，如何通过知道其字段名称来重复动态对象？聚合物表中的模板重复动态对象

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

是没有什么办法可以创建一个照顾反射逻辑的和在聚合物元件用它的自定义表达式..？

来源

2014-04-25 invariant

你应该让cols和fields观察到与toObservable([])像你用rows这样做的观统领的更新通知的时间。
这可能不是必要的，如果值是静态的，但你必须确保值分配绑定进行评估之前（~~enteredView()~~attached()的~~super.enteredView()~~super.attached()电话后肯定是要迟到（你的情况“数据”将还没有加入，所以你应该使用toObservable()。
我认为回调方法polymerCreated（前super.polymerCreated()调用应该工作。

我想，而不是{{row.field}}你想{{row[field]}}

如果它仍然不起作用，请添加评论，我会寻找其他原因。

来源

2014-04-25 12:33:30

数据被填充细，如果我使用 {{row.fname}} ，{{行[字段]}}也没有为我工作:( – invariant

我看到你写了'能够看到列名'，我不知道为什么这个工作。你应该也验证这是否工作在JavaScript解决了主要问题后，这种方式（数据不显示） –

for row [field]我收到错误未捕获错误：类'People'没有实例方法'[]'。参数：[“fname”]，任何特殊的东西我必须添加到我的人员类以这种方式访问字段？ – invariant

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

回答

相关问题