Question

我想将phone-component.html嵌入另一个phone-view-component.html自定义元素中。在phone-view-component.html的列中，在最后一列中有一个'类型'，'提供商'，'数字' - 所有文字 - 和一个按钮 - '新'。我想使用手机视图组件中的“新建”按钮添加由<select>，<datalist>和<tel>以及<button>组成的电话组件（'在第一行的每一行下删除'）。因此，每次单击“新建”按钮时，都会插入一个新行。 “删除”按钮将删除它所属的行。

到目前为止，我的尝试如下所示：

电话component.html

<!DOCTYPE html>

<polymer-element name='epimss-phone-component'>   
  <template>
  <roole src="reg-roole.rin" monitor="1"></roole> 
    <table border="1" width="100%">
      <tbody>
        <tr>
          <td>
              <select id="phoneCmbo" selectedIndex='{{phoneSelectedIndex}}' >
                <option value="{{phone}}"
                        template repeat="{{phone in phones}}" >{{phone}}
                </option>
              </select>
          </td>
          <td>
            <input id='providerTxt' type='text' value='{{phone.provider}}' list='providers'>
              <datalist id='providers'>
                  <template repeat='{{provider in providers}}'>
                    <option value='{{provider}}'>{{provider}}</option>
                  </template>
              </datalist>          
          </td>
          <td><input id='num' type='tel' value='{{phone.num}}'>
          </td>
          <td>
              <button id='deleteBtn on-click={{deleteRow}}'></button>
          </td>
          <td>
          </td>
        </tr>
      </tbody>
    </table>
   </template>

   <script type="application/dart">

    import 'package:polymer/polymer.dart' show CustomTag, PolymerElement, observable;
    import 'dart:html' show Event, Node;

    import 'package:epimss_polymer/reg_popo.dart' show Phone;

      @CustomTag( 'epimss-phone-component' )
      class PhoneElement extends PolymerElement 
      {
        @observable Phone phone = new Phone();

        List<String> phones = ['', 'Car', 'Fax', 'Home', 'Home Fax', 'Home Mobile', 
                               'Home Video', 'Mobile', 'Pager', 'Work', 
                               'Work Direct', 'Work Fax', 'Work Mobile', 'Work Video',
                               'Next-of-Kin Home', 'Next-of-Kin Mobile', 
                               'Next-of-Kin Work', 'Tollfree', 'Web Phone'];

        List<String> providers = [ '', 'AT&T', 'Digicel', 'Flow', 'Lime' ];

        int providerSelectedIndex = 0;

        //@observable Map phone = toObservable( new Phone() );
        PhoneElement.created() : super.created();

        void addRow( Event e, var detail, Node target)
        {
          print( 'New row created' );

        }


        void deleteRow( Event e, var detail, Node target)
        {
          print( 'Current row deleted' );

        }


      }

    </script> 
</polymer-element>

电话 - 视图 - component.html

<!DOCTYPE html>

<link rel="import" href="phone-component.html"> 

<polymer-element name='epimss-phone-view-component'>   
  <template>
  <roole src="reg-roole.rin" monitor="1"></roole> 
    <table border="1" width="100%">
      <tbody>
        <tr>
          <td><label id='typeLbl' for='typeDlst'>Type</label></td>
          <td><label id='providerLbl' for='providerDlst'>Provider</label></td>
          <td><label id='numberLbl' for='numberTxt'>Number</label></td>
          <td><input id='newBtn' type='button' value='New' on-click='{{addRow}}'>
        </tr>

      </tbody>
    </table>
    <epimss-phone-component></epimss-phone-component>
   </template>

   <script type="application/dart">

    import 'package:polymer/polymer.dart' show CustomTag, observable;
    import 'dart:html' show Event, Node;
    import 'package:roole_element/element.dart' show RooleElement;

    import 'package:epimss_polymer/reg_popo.dart' show Phone;

      @CustomTag( 'epimss-phone-view-component' )
      class PhoneViewElement extends RooleElement 
      {
        @observable Phone phone = new Phone();

        PhoneViewElement.created() : super.created();
      }

    </script> 
</polymer-element>

phone.dart

part of reg_popo;

class Phone extends Observable
{

  String type = '';

  String provider = '';
  String num = '';

}

我不知道如何在每个表列中放置窗口小部件并检索List模型中的每一行新数据。

感谢任何帮助。感谢

将自定义TableElement嵌入另一个Custom元素中

0 个答案: