Question

拥有我正在运行的模板转发器，并通过点运算符显示数据

<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表示现在允许在Polymer 0.5中使用，但在1.0中有一个实验分支，名为： Polymer Expressions https://github.com/Polymer/polymer-expressions/tree/2.0-preview 这表明它可以完成。

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

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

如果能搞清楚，我会发布一个后续答案。

Answer 1

这是我提出的答案：

<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>

使用Dart代码：

@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必须位于行对象中....而标题键是行对象的子集。因此，它将设置列的顺序，并将其用作行数据的引用因子。

它将保持每行仍然可以访问其他方法的完整数据集，但只显示当前在标题中设置的内容。

这很好地绕过了支架操作员。

通过大括号而不是点（。）运算符

1 个答案: