Accessing Databindings by braces instead of dot (.) operator - dart

Question

Have a template repeater that I am running, and showing data by the dot operator
<template as="dom-repeat" items="{{list}}" as="row" index-as="rowIndex"
<div>{{row.foo}}</div>
<div>{{row.bar}}</div>
</template
I was trying to get the item by braces
<div>row["foo"]</div>
<div>row['bar']</div>
but those dont work, but is there a way to make it work? I am trying to make this list dynamic based on some object metadata, generalizing it. That way i could run something like:
<div>{{row[getKey(rowIndex)]}}</div>
Edit:
I saw this: https://github.com/Polymer/polymer/issues/1504 which states that this is now allowed in Polymer 0.5, but there is an experimental branch in 1.0 called: Polymer Expressions at https://github.com/Polymer/polymer-expressions/tree/2.0-preview
which shows that it can be done.
The issue is that this is experimental therefore I dont want to add this to my production DartPolymer1.0 codebase.
I guess withh that said, are there workarounds for it? Im thinking I might try to do something with conversion of Objects to arrays for accessing and then just do a direct access.
Will post a follow-on answer if i can figure it out.

Answer 1

This is the answer I had come up with:
<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>
with the Dart code of:
#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);
}
therefore when defining this element:
<myDataGrid data="{{testrows}}" columnheaders="{{headers}}"></myDataGrid>
where the dart objects are formed in the idea of:
List<Map> headers = [{"columnKey":"ColumnTextString"},....];
List<Map> testRows = [{"columnKey": data, "anotherColumnKey": dataB}];
where the columnKey has to be in the Row Objects.... and headers keys are a subset of the Row Objects'. Therefore, it will set an order of columns and use that as a referencing factor for the Row Data.
It will maintain that each row still has access to the full set of data for other means, but will only display what is currently set up in the headers.
This gets around the bracket operator fairly well.