How to remove a child component with a delete butt

2019-01-20 15:45发布

站内问答 / 移动开发
991 2 5

I have an email component (email-tag.html) that consist of a label, a select and a delete button element.

The email-tag.html component is hosted in its parent email-view-tag.html. email-view-tag contains an add-email-button that adds the email-tag element to the DOM each time it is clicked.

I need help in removing an added email-tag component when its delete-button is clicked. It is the compnoent that contains the delete-button that should be removed.

The two components are shown below:

email-tag.html

 <!DOCTYPE html>

<polymer-element name='email-tag'>
  <template>
   <style>

   .main-flex-container
   {
     display:flex;
     flex-flow:row wrap;
     align-content:flex-start;
   }

    .col
    {
      display:flex;
      flex-flow:column;
      align-content:flex-start;
      flex-grow:1;
    }
   </style>

   <div id='email' class='main-flex-container'>
      <section id='col1' class='col'>
        <input id=emailTxt
               type='text'
               list='_emails'
               value='{{webContact.homeEmail}}'>

        <datalist id='_emails'>
            <template repeat='{{email in emails}}'>
              <option value='{{email}}'>{{email}}</option>
            </template>
        </datalist>
      </section>

      <section id='col2' class='col'>
        <button id='delete-email-btn' type='button' on-click='{{deletePhone}}'>Delete</button>
      </section>
    </div>
   </template>

   <script type="application/dart">

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

    @CustomTag( 'email-tag' )
    class EmailElement extends PolymerElement
    {
      //@observable
      EmailElement.created() : super.created();
      List<String> emails = [   '', 'Home', 'Personal', 'Private', 'Work', ];

      void deletePhone( Event e, var detail, Node target)
      {
        //shadowRoot.querySelector('#new-phone' ).remove();
        //print( 'Current row deleted' );
      }
    }
  </script>
</polymer-element>

email-view-tag.html

  <!DOCTYPE html>

  <link rel="import" href="email-tag.html">

  <polymer-element name='email-view-tag'>
    <template>
     <style>

     .main-flex-container
     {
       display:flex;
       flex-flow:row wrap;
       align-content:flex-start;
     }

      .col
      {
        display:flex;
        flex-flow:column;
        align-content:flex-start;
        flex-grow:1;
      }
     </style>

      <div id='email-view' class='main-flex-container'>
        <section id='row0'  >
          <button id='add-email-btn' type='button' on-click='{{addPhone}}'>Add Phone</button>
        </section >

        <section id='rows' class='col'>
       <!--    <epimss-phone-header-tag id='col1' class='col'></epimss-phone-header-tag> -->
          </section>
      </div>
     </template>

     <script type="application/dart">
      import 'package:polymer/polymer.dart' show CustomTag, PolymerElement;
      import 'dart:html' show Event, Node, Element;

      @CustomTag( 'email-view-tag' )
      class EmailViewElement extends PolymerElement
      {
        //@observable
        EmailViewElement.created() : super.created();

        void addPhone( Event e, var detail, Node target )
        {
          $[ 'rows' ].children.add( new Element.tag( 'email-tag' ) );
        }

        @override
        void attached() {
          super.attached();

          $[ 'add-email-btn' ].click();
        }
      }
    </script>
  </polymer-element>

The application does execute normally and clicking the add button does add the email component. The delete button does not work - it is here I am asking for help.

Thanks

2条回答
何必那么认真
2楼-- · 2019-01-20 16:09

EDIT @ShailenTuli is right about encapsulation should not be broken.

But also JS Polymer elements access the parent in their layout elements because it's still convenient in some scenarios.

This works now in PolymerDart too.

(this.parentNode as ShadowRoot).host

ORIGINAL

You can fire an event and make the email-view-tag listen to this tag and the event handler can remove the event target from it's childs.

查看更多
0人赞 添加讨论(0) 举报
Lonely孤独者°
3楼-- · 2019-01-20 16:21

The child component, <email-tag> should not be in the business of deleting itself. Instead, it should delegate that responsibility to the the parent component, email-view-tag, by dispatching a custom event.

Here is the code for dispatching a custom event from deletePhone:

void deletePhone( Event e, var detail, Node target){
  dispatchEvent(new CustomEvent('notneeded'));
}

Then, in the parent, <custom-view>, change your code for adding <email-tag>s like so:

void addPhone( Event e, var detail, Node target ) {
  $['rows'].children.add( new Element.tag('email-tag'));
  $['rows'].on["notneeded"].listen((Event e) {
    (e.target as Element).remove();
  });
}

Also, I would change the name of deletePhone, since the method no longer deletes the record but merely informs the parent that it is not needed. Call it 'notNeeded' or something similar.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)