Блог

Главная - Вопросы по программированию - Полимер передает переменные из элемента в прослушиватель событий на другой странице

Полимер передает переменные из элемента в прослушиватель событий на другой странице

#polymer #polymer-1.0

#полимер #полимер-1.0

Вопрос:

Из прототипа Polymer Starter Kit у меня есть функция из <my-view1> , которая запускает функцию из <my-app> через прослушиватель событий.

Я хочу иметь возможность отправлять некоторую информацию вместе с этим, поэтому я настроил атрибут данных, который записывается в переменной.

Как я могу затем отправить эту переменную моему основному прослушивателю событий и функционировать в <my-app> ?

<my-view1> Атрибут данных:

 <paper-button raised on-tap="open" data-target="#dialog">Dialog</paper-button>

<my-view1> Функция:

 open: function(e) {
  const target = e.target.dataset.target || e.target.parentElement.dataset.target;
  this.fire('open-dialog'); //send target variable somehow?
}

<my-app> прослушиватель:

 listeners: {
  'open-dialog': 'handleOpenDialog' //get target variable from my-view1
}

<my-app> Функция:

 handleOpenDialog: function(e) {
  console.log(target); //get target variable from listener
}

Спасибо!

Ответ №1:

Вы могли бы указать детали события при вызове fire(eventName, [detail], [options]) . В вашем случае вы бы передали target (селектор для целевого диалога) в деталях события, и ваш обработчик событий запросил бы своих дочерних элементов с помощью этого селектора для извлечения диалога.

 // my-view1
open: function(e) {
  const target = e.target.dataset.target;
  this.fire('open-dialog', target);
}

// my-app
handleOpenDialog: function(e) {
  const target = e.detail;
  const dialog = this.$$(target);
  if (dialog) {
    dialog.opened = true;
  }
}
  

 HTMLImports.whenReady(() => {
  Polymer({
    is: 'my-app',

    listeners: {
      'open-dialog': 'handleOpenDialog'
    },
    
    handleOpenDialog: function(e) {
      const target = e.detail;
      const dialog = this.$$(target);
      if (dialog) {
        dialog.opened = true;
      }
    }
  });
  
  Polymer({
    is: 'my-view1',
    open: function(e) {
      const target = e.target.dataset.target;
      this.fire('open-dialog', target);
    }
  });
});  
 <head>
  <base href="https://polygit.org/polymer 1.7.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="paper-button/paper-button.html">
  <link rel="import" href="paper-dialog/paper-dialog.html">
</head>
<body>
  <my-app>
    <my-view1></my-view1>
  </my-app>

  <dom-module id="my-app">
    <template>
      <content></content>
      <paper-dialog id="dialog1">
        <h2>Dialog 1</h2>
        <div class="buttons">
          <paper-button dialog-dismiss>Cancel</paper-button>
          <paper-button dialog-confirm autofocus>Accept</paper-button>
        </div>
      </paper-dialog>
      
      <paper-dialog id="dialog2">
        <h2>Dialog 2</h2>
        <div class="buttons">
          <paper-button dialog-dismiss>Cancel</paper-button>
          <paper-button dialog-confirm autofocus>Accept</paper-button>
        </div>
      </paper-dialog>
    </template>
  </dom-module>

  <dom-module id="my-view1">
    <template>
      <paper-button on-tap="open" data-target="#dialog1">Dialog 1</paper-button>
      <paper-button on-tap="open" data-target="#dialog2">Dialog 2</paper-button>
    </template>
  </dom-module>
</body>

codepen

Комментарии:

1. Извините, забыл сказать спасибо за это =) Как бы вы тогда заставили e.detail открыть диалоговое окно. Например, var dialog = e.detail; диалог. open, похоже, не работает. Приветствия.

2. Ах, здорово! Это здорово, спасибо! Просто нужно было добавить еще одну переменную перед переменной диалога. Приветствия!