шаблон повторяет динамический объект в полимерной таблице

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

<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);
      });
    }

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


person invariant    schedule 25.04.2014    source источник


Ответы (1)


Вы должны сделать cols и fields наблюдаемыми с помощью toObservable([]), как вы сделали с rows, чтобы представление получало уведомления об обновлениях.
Это может быть необязательно, если значения являются статическими, но тогда вы должны убедиться, что значения назначены до оценки привязок (enteredView()attached() после вызова super.enteredView() super.attached() определенно поздно (в вашем случае «данные» еще не будут установлены, поэтому вы следует использовать toObservable().
Я думаю, что метод обратного вызова polymerCreated (до вызова super.polymerCreated() должен работать.

Я думаю, вместо {{row.field}} вы хотите {{row[field]}}

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

person Günter Zöchbauer    schedule 25.04.2014
comment
данные заполняются нормально, если я использую ‹tr template repeat={{row in rows}}› ‹td› {{row.fname}} ‹/td› ‹/tr›, {{row[field]}} также не у меня не сработало :( - person invariant; 25.04.2014
comment
Я видел, что вы написали able to see column names, и мне интересно, почему это работает. Вы также должны проверить, работает ли это в JavaScript таким образом, после того, как вы решили основную проблему (данные не отображаются). - person Günter Zöchbauer; 25.04.2014
comment
для строки [поле] я получаю следующую ошибку Uncaught Error: Class 'People' не имеет метода экземпляра '[]'. NoSuchMethodError: метод не найден: '[]' Получатель: Экземпляр аргументов «Люди»: [fname], что-то особенное, что я должен добавить в свой класс Person для доступа к полям таким образом? - person invariant; 25.04.2014
comment
Немного сложно анализировать этот код/данные, что он на самом деле делает. Я думаю, вам следует добавить оператор [] в класс People, чтобы таким образом иметь доступ к полям. Я не думаю, что это сработает, как вы пытались в своем вопросе, что Polymer создает имена методов/полей из значений во время выполнения и получает к ним доступ. - person Günter Zöchbauer; 25.04.2014
comment
я изменил тип строк на List‹Map‹String, dynamic›› и использовал зеркала дротика для заполнения данных в строки из объектов, теперь строка [поле] работает нормально, есть ли способ поместить весь этот код отражения в форму выражение и использовать его в объявлении пользовательского элемента? - person invariant; 26.04.2014
comment
Понимаю. Я не думаю, что есть способ сделать это декларативно или каким-либо другим способом без размышлений. Одной из альтернатив является реализация оператора [], о котором я уже упоминал, но тогда реализация оператора должна сопоставлять имена полей с конкретными полями. - person Günter Zöchbauer; 26.04.2014
comment
я могу это сделать, но меня больше интересует решение этого в самом пользовательском элементе таблицы, принуждение пользователей к элементам таблицы - не очень хорошая идея... - person invariant; 26.04.2014