用大括號而不是點訪問數據綁定（。）運算符

有我運行一個模板中繼器，並通過點運算用大括號而不是點訪問數據綁定（。）運算符

<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

用大括號而不是點訪問數據綁定（。）運算符

回答

相關問題