更改事件时不会触发克隆的表格行单元格小部件 on-change 事件

Question

这是Error | Removing disallowed attribute on SelectElement的后续问题

我创建了一个如下图所示的表：

更改事件附加到选择下拉列表。对于第一行，随着下拉内容的更改，事件会按预期触发。但是，当通过克隆添加新行时，事件侦听器不会触发。关于如何最好地触发附加事件，我需要一些帮助。

.html

    <link rel='import' href='../../../../packages/polymer/polymer.html' >

    <link rel='import' href='../../../../packages/paper_elements/paper_checkbox.html' >
    <link rel='import' href='../../../../packages/paper_elements/paper_button.html' >
    <link rel='import' href='../../../../packages/core_elements/core_collapse.html' >
    <link rel='import' href='../../../../packages/core_elements/communication_icons.html' >

    <polymer-element name='phone-form'>
      <template>


        <table id='table-1'>
          <thead>
            <tr>
              <th width='20px'></th>
              <th width='67px'>Type</th>
              <th width='130px'>Provider</th>
            </tr>
          </thead>        

        </table>

        <table id='table'>
          <tbody>
            <tr>
              <td><input name='chk' type='checkbox'></td>
              <td>
                <select id='phone-type'
                  selectedIndex='{{typeSelected}}' 
                  on-change='{{onChangeTypeFired}}'>
                  <option template repeat='{{key in types.keys}}' 
                    value='{{types[key]}}'>{{types[key]}}
                  </option>
                </select>
              </td>

              <td>
                <select id='phone-provider'
                  selectedIndex='{{providerSelected}}' 
                  on-change='{{onChangeProviderFired}}'>
                  <option template repeat='{{key in providers.keys}}' 
                    value='{{providers[key]}}'>{{providers[key]}}
                  </option>
                </select>
              </td> 
            </tr>
          </tbody>
         </table>
          <div>
            <paper-button raised id='add-row-btn' class='margin-8px'     
              on-click='{{addRow}}'>
              Add Row
              <core-icon id='add-row-btn-icon' icon=''></core-icon>
            </paper-button>

            <paper-button raised id='delete-row-btn' class='margin-8px'     
              on-click='{{deleteRow}}'>
              Delete Row
              <core-icon id='delete-row-btn-icon' icon='fa:minus-circle'></core-icon>
            </paper-button>
           </div>
      </template>
      <script type='application/dart' src='phone_form.dart'></script>
    </polymer-element>

.dart

import 'package:polymer/polymer.dart';
import 'dart:html' as dom;

//import 'package:paper_elements/paper_toggle_button.dart' show PaperToggleButton;
import 'package:paper_elements/paper_button.dart' show PaperButton;

//import 'package:epimss_shared/epimss_shared.dart';
//import 'package:epimss_shared/epimss_shared_client.dart' hide DataEvent;

@CustomTag('phone-form')
class PhoneForm extends PolymerElement {

  @observable String icon = '';
  @observable String errorMsg;
  String topic;
  PaperButton addBtn;

  @observable int typeSelected = 0;
  @observable int providerSelected = 0;
  @observable int relationsSelected = 0;

  Map<String, String> types = const <String, String> {
    '': '',
    'Car': 'Car',
    'Direct': 'Direct',
    'Fax': 'Fax',

  };

  Map<String, String> providers = const <String, String> {
    '': '',
    'AT & T': 'AT & T',
    'Cable & Wireless': 'Cable & Wireless',

  };

  PhoneForm.created() : super.created();


  void onSelectTypeFired()
  {

  }

  void onChangeTypeFired( dom.Event e, var detail, dom.SelectElement target)
  {

    print(target.value);
  }

  void onChangeProviderFired( dom.Event e, var detail, dom.SelectElement target)
  {
    print(target.value);
  }


  void onChangeRelationsFired( dom.Event e, var detail, dom.SelectElement target)
  {
    print(target.value);
  }

  void addRow()
  {
    var table = $['table'];
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
    var colCount = table.rows[0].cells.length;



      for(var i = 0; i < colCount; i++ )
      {
        var newcell = row.insertCell(i);

        newcell.children.clear();
        newcell.children.addAll(table.rows[0].cells[i].children.map((c) =>
            c.clone(true)));

        switch(newcell.childNodes[0].runtimeType.toString())
        {
          case 'text':
            newcell.childNodes[0].value = '';
            break;

          case 'checkbox':
            newcell.childNodes[0].checked = false;

            break;

          case 'select':
            newcell.childNodes[0].selectedIndex = 0;
            break;
        }
      }




  }


  void deleteRow()
  {

    var rowsToDelete = [];

    try{
      var table = $['table'];
      var rowCount = table.rows.length;

      for(var i = 0; i < rowCount; i++)
      {
        var row = table.rows[i];
        var chkbox = row.cells[0].childNodes[0];

        if(chkbox != null && chkbox.checked)
        {
          if(rowCount <= 1)
          {
            print('Cannot delete all the rows.');
            break;
          }
          else
          {
            rowsToDelete.add(i);
          }
        }
      }

      rowsToDelete.forEach( (row)
          {
            table.deleteRow(row);
          });
    }
    catch(e)
    {  print(e); }
  }


  @override
  void attached() {
    super.attached();
    topic = this.dataset['topic'];

    addBtn = $['add-btn'];
  }
}

谢谢

Answer 1

克隆只是不复制事件处理程序（参见例如https://groups.google.com/a/dartlang.org/forum/#!topic/misc/-z_8sVp_uPY）

您可以使用<template repeat> 来生成上一个问题中提到的行和单元格。另一种方法是使用injectBoundHtml (https://www.polymer-project.org/docs/polymer/databinding-advanced.html#boundhtml)。

使用injectBoundHtml，您无法从 DOM（innerHtml 或类似内容）读取 HTML，因为您在这里得到的已经是 Polymer 解释的绑定。当您将 HTML 存储在 Dart 代码中的字符串中时，您可以多次添加它，并且每次插入时都会解释它。

如果您更喜欢 HTML 文件中的内容，您可以使用模板代替

injectBoundHtml((this.querySelector('#my_template') as TemplateElement)
    .innerHtml);

（实际上没试过）