如何使用子项本身中的删除按钮删除子组件 [英] How to remove a child component with a delete button in the child itself

查看:96
本文介绍了如何使用子项本身中的删除按钮删除子组件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个由标签,选择和删除按钮元素组成的电子邮件组件(email-tag.html)。

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

email-tag.html组件托管在其父email-view-tag.html中。电子邮件视图标签包含一个添加电子邮件按钮,在每次点击时将电子邮件标签元素添加到DOM。

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.

这两个组件如下所示:

email-tag.html

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

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.

感谢

推荐答案

子组件< email-tag> 不应处于删除自身的行为。相反,它应该通过分派自定义事件将该责任委托给父组件 email-view-tag

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.

以下是从 deletePhone 调度自定义事件的代码:

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

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


$ b <视图> ,更改添加<​​code>< email-tag> 的代码,如下所示:

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

此外,我将更改 deletePhone ,因为该方法不再删除记录,而只是通知父进程不需要它。称之为notNeeded或类似的东西。

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.

这篇关于如何使用子项本身中的删除按钮删除子组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆