用大括号而不是点访问数据绑定（。）运算符

有我运行一个模板中继器，并通过点运算用大括号而不是点访问数据绑定（。）运算符

<template as="dom-repeat" items="{{list}}" as="row" index-as="rowIndex" 
    <div>{{row.foo}}</div> 
    <div>{{row.bar}}</div> 
</template

我试图让受括号的项目显示数据

<div>row["foo"]</div> 
    <div>row['bar']</div>

但那些不工作，但有没有办法让它工作？我试图根据一些对象元数据使这个列表动态化，并将其推广。这样，我可以运行类似：

<div>{{row[getKey(rowIndex)]}}</div>

编辑：

我看到了这一点：https://github.com/Polymer/polymer/issues/1504其中指出，这是现在允许聚合物0.5，但是在1.0的实验分支叫：Polymer Expressions at https://github.com/Polymer/polymer-expressions/tree/2.0-preview 这表明它可以完成。

问题是这是实验性的，因此我不想将此添加到我的生产DartPolymer1.0代码库中。

我猜想说，有没有解决方法呢？我想我可能会尝试将对象转换为数组进行访问，然后直接进行访问。

如果我能算出来，会发布一个后续答案。

来源

2016-03-21 Fallenreaper

你的'行'项是什么？我认为'row.foo'应该可以工作。 –

它，但行[“富”]不。我正在尝试创建一个通用案例表，它将接受与对象列表中的数据关联的列。所以我正在研究如何确定分配，以便在正确的标题下显示变量。大多数情况下，我觉得我只需要在Dart中执行一个功能来解决这个问题，而不是在标记中进行。 – Fallenreaper

对不起，误解了这个问题。是的计算值应该工作。像'getRowProp（row，propName）' –

这就是答案，我想出了：

<style> 
    .table{ 
     display:table; 
    } 
    .row{ 
     display:table-row; 
    } 
    .cell{ 
     display:table-cell; 
    } 

    .th{ 
     display:table-cell; 
     font-weight: bold; 
    } 
    .table, .row, .cell, .th { 
     border: solid 1px black; 
     padding: 5px; 
    } 
</style> 
<div class="table"> 
    <div id="headerRow" class="row"> 
     <template is="dom-repeat" items="{{columnHeaders}}"> 
      <template is="dom-repeat" items="{{convertMap(item)}}" as="prop"> 
       <div class="th">{{prop.value}}</div> 
      </template> 
     </template> 
    </div> 
    <template id="myRepeat" is="dom-repeat" items="{{data}}" as="row"> 
     <div class="row"> 
      <template is="dom-repeat" items="{{getListByFilter(row)}}" as="prop"> 
       <div class="cell">{{prop.value}}</div> 
      </template> 
     </div> 
    </template> 
</div>

用的飞镖代码：

@property 
List<Map> columnHeaders = []; 
@property 
List<Map> data = []; 

@reflectable 
List<Map> convertMap(Map map, [__]){ 
    List<Map> lst = map.keys.map((key)=> { "name": key, "value": map[key]}).toList(); 
    return lst; 
} 

@reflectable 
List<Map> getListByFilter(Map row) { 
    List<Map> headers = new List<Map>(); 
    columnHeaders.forEach((Map ele) => headers.add(convertMap(ele)[0])); 

    List<Map> rowList = new List<Map>(); 

    for (Map header in headers) { 
     print("in for loop"); 
     Map node = new Map(); 
     node["name"] = header["name"]; 
     node["value"] = row[header["name"]]; 
     rowList.add(node); 
    } 
    List keysToIgnore = rowList.map((Map element) => element["name"]).toList(); 

    for (String key in row.keys) { 
     if (!keysToIgnore.contains(key)) { 
     Map node = new Map(); 
     node["name"] = key; 
     node["value"] = row[key]; 
     rowList.add(node); 
     } 
    } 
    return rowList.sublist(0, columnHeaders.length); 
}

因此定义这个元素时：

<myDataGrid data="{{testrows}}" columnheaders="{{headers}}"></myDataGrid>

其中镖物体形成的想法是：

List<Map> headers = [{"columnKey":"ColumnTextString"},....]; 
List<Map> testRows = [{"columnKey": data, "anotherColumnKey": dataB}];

其中columnKey必须在行对象....和标题键是行对象的子集。因此，它将设置列的顺序并将其用作行数据的参考因子。

它会保持每行仍然可以访问其他方式的全部数据集，但只会显示标题中当前设置的内容。

这可以很好地解决支架操作问题。

来源

2016-03-22 21:44:46 Fallenreaper

用大括号而不是点访问数据绑定（。）运算符

回答

相关问题