聚合物表中的模板重複動態對象

我想創建自定義表格元素，如何通過知道其字段名稱來重複動態對象？聚合物表中的模板重複動態對象

<tr template repeat="{{row in rows}}"> 
    <td template repeat="{{field in fields}}"> 
     {{row.field}} 
    </td> 
</tr>

table_elemnet.html

<polymer-element name = "table-element" attributes ="structure data"> 
    <template> 
     <table class="bordered" id="table_element"> 
      <tr> 
       <th template repeat="{{col in cols}}"> 
        {{col}} 
       </th> 
      </tr> 
      <tr template repeat="{{row in rows}}"> 
       <td template repeat="{{field in fields}}"> 
        {{row.field}} 
       </td> 
      </tr> 
     </table> 
    </template> 
<script type="application/dart" src="table_element.dart"></script> 
</polymer-element>

table_element.dart

import "package:polymer/polymer.dart"; 


/** 
* Custom table element 
* 
*/ 

@CustomTag("table-element") 
class Table extends PolymerElement { 

@published List<Map<String,String>> structure; // table struture column name and value factory 
@published List<dynamic> data; // table data 

@observable List<dynamic> rows = toObservable([]); 
@observable List<String> cols = []; 
@observable List<String> fields = []; 

static const COLUMN_NAME = "columnName"; 
static const FIELD_NAME = "fieldName"; 

    Table.created():super.created(); 

    void enteredView() { 
    super.enteredView(); 
    structure.forEach((map) { cols.add(map[COLUMN_NAME]); fields.add(map[FIELD_NAME]);}); // populate columns and fields from table 
    rows.addAll(data); 
    } 
}

屬性從測試元件的值：

List<People> data = [new People("name1","name2"),new People("name2","name4")]; 
List<Map<String,String>> structure = [{ "columnName" : "First Name", "fieldName" : "fname"}, 
                 {"columnName" : "Last Name", "fieldName" : "lname"}];

我ñ瀏覽器，我能夠看到列名而不是數據..

編輯：

我改變行使用鏢鏡子，現在行[現場]工作正常，當我鍵入List<Map<String,dynamic>>和填充行我只是在看地圖。

if(data != null) { 
     data.forEach((element) { // kind of hackish dynamic object iteration 
     Map row ={}; 
     fields.forEach((field) { 
     row[field] = reflect(element).getField(new Symbol(field)).reflectee;}); 
     rows.add(row); 
     }); 
    }

是沒有什麼辦法可以創建一個照顧反射邏輯的和在聚合物元件用它的自定義表達式..？

來源

2014-04-25 invariant

你應該讓cols和fields觀察到與toObservable([])像你用rows這樣做的觀統領的更新通知的時間。
這可能不是必要的，如果值是靜態的，但你必須確保值分配綁定進行評估之前（~~enteredView()~~attached()的~~super.enteredView()~~super.attached()電話後肯定是要遲到（你的情況「數據」將還沒有加入，所以你應該使用toObservable()。
我認爲回調方法polymerCreated（前super.polymerCreated()調用應該工作。

我想，而不是{{row.field}}你想{{row[field]}}

如果它仍然不起作用，請添加評論，我會尋找其他原因。

來源

2014-04-25 12:33:30

數據被填充細，如果我使用 {{row.fname}} ，{{行[字段]}}也沒有爲我工作:( – invariant

我看到你寫了'能夠看到列名'，我不知道爲什麼這個工作。你應該也驗證這是否工作在JavaScript解決了主要問題後，這種方式（數據不顯示） –

for row [field]我收到錯誤未捕獲錯誤：類'People'沒有實例方法'[]'。參數：[「fname」]，任何特殊的東西我必須添加到我的人員類以這種方式訪問字段？ – invariant

聚合物表中的模板重複動態對象

回答

相關問題