如何使用子组件本身的删除按钮删除子组件答案

【问题标题】：How to remove a child component with a delete button in the child itself如何使用子组件本身的删除按钮删除子组件
【发布时间】：2013-12-05 17:11:02
【问题描述】：

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

email-tag.html 组件托管在其父 email-view-tag.html 中。 email-view-tag 包含一个 add-email-button ，每次单击时都会将 email-tag 元素添加到 DOM。

当单击删除按钮时，我需要帮助删除添加的电子邮件标签组件。应该删除的是包含删除按钮的组件。

两个组件如下图：

电子邮件标签.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>

应用程序执行正常，单击添加按钮确实添加了电子邮件组件。删除按钮不起作用 - 我在这里寻求帮助。

谢谢

【问题讨论】：

标签： dart dart-polymer

【解决方案1】：

子组件<email-tag> 不应自行删除。相反，它应该通过调度自定义事件将该责任委托给父组件email-view-tag。

这是从deletePhone 调度自定义事件的代码：

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

然后，在父级<custom-view> 中，更改代码以添加<email-tag>s，如下所示：

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 的名称，因为该方法不再删除记录，而只是通知父级不需要它。称之为“不需要”或类似的东西。

【讨论】：

当然。如果您发现答案对您有用，您介意接受吗？
当然图里，答案正是我想要的。再次感谢。
您能接受答案吗？您可以通过单击问题左上角的复选标记来完成此操作，谢谢。

【解决方案2】：

编辑 @ShailenTuli 关于封装不应该被破坏是正确的。

但 JS Polymer 元素也可以在其布局元素中访问父级，因为在某些情况下它仍然很方便。

这现在也适用于 PolymerDart。

(this.parentNode as ShadowRoot).host

原创

您可以触发一个事件并让 email-view-tag 监听这个标签，并且事件处理程序可以从它的子元素中删除事件目标。

前段时间我有一个类似的问题： How to access parent model from polymer component
这实际上是我想参考的问题
How can I access the host of a custom element
但第一个可能也有一些用处。
PolymerJS FAQ - When is the best time to access an element’s parent node?
attached() ~~目前在 Dart 中仍命名为 enteredView()，但可能很快会更名。~~

【讨论】：

感谢 ZOechi。我对 Dart 事件不是很熟悉。您能否添加一些代码来为我的组件演示这一点。我将不得不深入研究这些事件。谢谢