Доступ DataBindings фигурными скобками вместо точки (.) Оператор

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> 

Edit:

Я видел это: https://github.com/Polymer/polymer/issues/1504 в котором говорится, что в настоящее время допускается в Polymer 0,5, но имеется экспериментальная ветвь в 1.0 называется: Выражения полимера по адресу https://github.com/Polymer/polymer-expressions/tree/2.0-preview , который показывает, что это можно сделать.

Проблема в том, что это экспериментально, поэтому я не хочу добавлять это в свою производственную базу данных DartPolymer1.0.

Я предполагаю, что это говорит о том, что для этого существуют обходные пути? Im думая, что я могу попытаться что-то сделать с преобразованием объектов в массивы для доступа, а затем просто сделать прямой доступ.

Опубликуйте следующий ответ, если я смогу это выяснить.

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> 

с кодом дротик:

@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 должен быть в Row Objects .... и заголовки являются подмножеством объектов Row. Поэтому он будет устанавливать порядок столбцов и использовать это как ссылочный коэффициент для данных строки.

Он будет поддерживать, что каждая строка все еще имеет доступ к полному набору данных для других средств, но отображает только то, что в настоящее время настроено в заголовках.

Это довольно хорошо работает с оператором скобки.