-1

所以基本上我正在努力解决的是如何将父元素的引用传递给它的子元素，即自定义删除元素？ 谁能帮帮我！

*******************这是el-insert元素******************** //这个元素从另一个元素（用户名和评论）接收数据

<link rel="import" href="./remove.html"> 
<dom-module id="el-insert">
    <template >

        <div id="userComment"><span>{{username}}</span>:&nbsp;{{saveComment}}</div>
        <input id="edit"  type="text" value={{saveComment::input}}>
        <hr>
        <reply-comment></reply-comment>
        <button on-click="edit">Edit</button>
        <remove-comment ></remove-comment>

    </template>
    <script>
        class elInsert extends Polymer.Element {
            static get is() { return 'el-insert'; }
            static get properties(){
                return {
                    saveComment:{
                        type:String,
                        notify:true
                    },
                    username:{
                        type:String,
                        notify:true
                    }




                }//return ends
            }
            edit (){
                $(this.$.userComment).toggleClass('hide');

                var display = $(this.$.edit).css('display');
                if(display == 'none'){
                    $(this.$.edit).css('display','block');
                }else{
                    $(this.$.edit).css('display','none');
                }     
            }




          }

          window.customElements.define(elInsert.is, elInsert);        
    </script>

</dom-module>

******************删除按钮元素******************

<link rel="import" href="../bower_components/polymer/polymer.html"> 
<dom-module id="remove-comment">
    <template>
        <button on-click="remove">el-Remove</button>

    </template>
    <script>
        class removeComment extends Polymer.Element {
            static get is() { return 'remove-comment'; }
            static get properties(){
                return{

                }//return ends
            }
            remove(){
                var element = this.parentNode.host;
                $(element).remove();
            }



        }
        window.customElements.define(removeComment.is,removeComment); 
    </script>

</dom-module>

这段代码非常适合我。但是，我将如何使用Nicolas的回答中提到的 fire 或 dispatch 做同样的事情。如何将事件详细信息从父元素传递到子元素？另外，我想让这个元素可重用，这样我就可以简单地将它放到另一个地方，就像在回复中删除它一样。（另外，我对聚合物很陌生，所以如果我在这段代码中还有什么可以改进的地方，请告诉我）我希望你们现在可以帮助我。

4

1 回答 1

0

您不想这样做 - 通常您应该只将属性传递给子元素并从父元素中的子元素捕获事件。

properties go down and events go up -

在您的情况下，您不必将任何内容传递给子元素。子元素应该只触发一个事件，而父元素应该在它捕捉到它时做出响应。

像这样的东西：

<dom-module id="child-element">
  <template>
    <div on-tap="_deleteComment"></div>
  </template>

  <script>
    class ChildElement extends Polymer.Element {
      ...
      _deleteComment() : {
        // fire event to be caught by parent
        const deleteEvent = new CustomEvent('deleteComment', {detail: {
          whatever: {
            you: 'want',
          },
        }});
        this.dispatchEvent(deleteEvent);
      } 
    }
    ...
  </script>
</dom-module>

<dom-module id="parent-element">
  <template>
    <child-element on-delete-comment="_deleteComment"></child-element>
  </template>

  <script>
    class ParentElement extends Polymer.Element {
      ...
      _deleteComment(evt) : {
        // handle evt
      } 
    }
    ...
  </script>
</dom-module>

@daKmoR 是对的——更多的上下文和一些代码会有所帮助——

于 2017-05-02T08:46:55.057 回答