1

phone-component.html別のphone-view-component.htmlカスタム要素に埋め込みたい。の列にphone-view-component.htmlは、「タイプ」、「プロバイダー」、「番号」 (すべてテキスト) とボタン (「新規」) が最後の列にあります。<select>phone-view-component の「New」ボタンを使用して、最初の行のそれぞれの下に、<datalist>および(「Delete」) で<tel>構成されるphone-component を追加したいと思います。<button>したがって、「新規」ボタンをクリックするたびに、新しい行が挿入されます。「削除」ボタンは、それが一部である行を削除します。

これまでの私の試みを以下に示します。

phone-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>

phone-view-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 モデルで新しいデータの各行を取得する方法がわかりません。

どんな助けでも大歓迎です。ありがとう

4

0 に答える 0