Polymer 1.0: Как да предам събитие към елемент на дъщерен възел, без да използвам ‹iron-signals›?

Този отговор на Stack Overflow предлага използването на <iron-signals> за излъчване на събитие надолу по DOM дървото към персонализиран елемент.

По-долу задавам различен въпрос.

Въпрос

Как мога:

  • предаване на събитие до директен дъщерен възел (персонализиран елемент)
  • от родител (персонализиран елемент)
  • без да използвате <iron-signals>?

Код

Това е, което имам досега. Но не става.

parent-element.html 
<dom-module id="parenet-element">   
  <template is="dom-bind">
    <child-element></child-element>
    <paper-button on-tap="_handleTap"></paper-button>
  </template>
</dom-module>
<script>
  (function(){
    Polymer({
      is: 'parenet-element',
      _handleTap: function() {
        this.fire("my-event");
      }
    });
  })();
</script>
child-element.html 
<dom-module id="child-element"> 
...
</dom-module>
<script>
  (function(){
    Polymer({
      is: 'child-element',
      listeners: {
        "my-event": "foo"
      },
      foo: function(){
        // Do stuff
      }
    });
  })();
</script>

javascript dom-events polymer polymer-1.0
person Let Me Tink About It    schedule 24.09.2015    source източник

Отговори (3)


arrow_upward
11
arrow_downward

Определено можете. Без iron-signals имате три опции (които в момента знам):

  1. Вземете родителя и накарайте детето да прикачи слушател на събития към родителя
  2. Родителят може да накара детето да задейства същото събитие
  3. Споменахте, че събитията вървят само нагоре. След това можете да накарате дъщерния елемент да слуша document, задействащ това събитие (но мисля, че това е лошо)

Ето един пример

<!doctype html>
<html>

<head>
  <base href="http://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="/bgpolymer/polymer.html" rel="import">
</head>

<body>
  <dom-module id="parent-element">
    <template>
      <child-element></child-element>
      <button id="btn" on-tap="_fireParentEvent1">Fire 1!</button>
      <button id="btn" on-tap="_fireParentEvent2">Fire 2!</button>
      <button id="btn" on-tap="_fireParentEvent3">Fire 3!</button>
    </template>
  </dom-module>
  <dom-module id="child-element">
    <template>
      <style>
        :host {
          display: block;
        }
      </style>
      <span id="changeMe">Message</span>
    </template>
  </dom-module>

  <parent-element></parent-element>
  <script>
    (function registerElements() {
      Polymer({
        is: 'parent-element',
        listeners: {
          'event-two': '_attachToChild'
        },
        _attachToChild: function(e) {
          // the parent makes the child fire an event
          var childElement = Polymer.dom(this.root).querySelector('child-element');
          childElement.fire('event-two', e.detail);
        },
        _fireParentEvent1: function(e) {
          // the parent fires an event
          this.fire('event-one', {
            message: 'hello'
          });
        },
        _fireParentEvent2: function(e) {
          this.fire('event-two', {
            message: 'goodbye'
          });
        },
        _fireParentEvent3: function(e) {
          // the parent fires an event
          this.fire('event-three', {
            message: 'game over'
          });
        }
      });

      Polymer({
        is: 'child-element',
        listeners: {
          'event-two': '_handleEventTwo'
        },
        ready: function() {
          var parent = this.parentNode;

          // the child listens to the parent's event
          parent.addEventListener('event-one', function(e) {
            this.$.changeMe.innerHTML = e.detail.message;
          }.bind(this));

          // listen to the document level event (since events travel up)
          // but this option is difficult to control
          document.addEventListener('event-three', function(e) {
            this.$.changeMe.innerHTML = e.detail.message;
          }.bind(this));
        },
        _handleEventTwo: function(e) {
          this.$.changeMe.innerHTML = e.detail.message;
        }
      });
    })();
  </script>
</body>

</html>

person Neil John Ramal    schedule 24.09.2015

arrow_upward
6
arrow_downward

така че новата система използва {{range .}}, а старата система използва {{.repeated section Name}}?
person Marios Fakiolas    schedule 07.02.2016
comment
това работи, но какво ще стане, ако има dom-repeat, прикрепено към child-element? например <dom-module id="parent-element"> <template is="dom-repeat" it> <child-element></child-element> </template> </dom-module> в тази ситуация querySelector просто ще задейства събитието за първия елемент, който съвпада, а querySelectorAll ще задейства събитието за всички елементи наведнъж. Искам едно по едно. Някаква идея? - person Yoshita Arora; 26.07.2017

arrow_upward
3
arrow_downward

@arthur in the Polymer Slack site says:

Събитията обикновено отиват нагоре в DOM дървото. Слизайки надолу, можете да използвате обвързване на данни или да извикате метод.

Сайт на Polymer Slack

person Let Me Tink About It    schedule 24.09.2015
comment
Няма достъп до приложената връзка, бихте ли могли да поставите някакъв пример, ако той е предоставил такъв. Благодаря! - person Srikanth Rayabhagi; 06.09.2016