Атрибут данных недоступен при использовании события с бумажной кнопкой в ​​Polymer 1.0

Я публикую это, потому что ответ опубликован в эта нить SO у меня не работает. Я хочу передать дополнительные параметры данных обработчику событий при касании с бумажной кнопки (в dom-repeat). Результаты с использованием следующих фрагментов кода предоставляют дополнительный элемент paper-material без данных.

С использованием:

<template is="dom-repeat" items="{{someParam}}>
  <paper-button on-tap="_handleTap" data-args="{{item}}">...</paper-button>
</template>

И обработка с:

var args = e.target.getAttribute('data-args').split(',');

or

e.target.dataset.args

Оба возвращают <paper-material ...>...</paper-material>

Что происходит? Почему цели не возвращают нажатую бумажную кнопку или данные в ней?!


javascript parameter-passing polymer polymer-1.0
person Sean    schedule 09.09.2015    source источник

Ответы (3)


arrow_upward
4
arrow_downward

Самый эффективный способ получить доступ к данным из экземпляра шаблона — сделать следующее:

<template is="dom-repeat" items="[[someParam]]">
  <paper-button on-tap="_handleTap">...</paper-button>
</template>

...

_handleTap: function(e) {
  var model = e.model.item;
  // Do something
}
person Ricky    schedule 10.09.2015
comment
Потрясающий! Спасибо, Рики! Это гораздо лучший подход. Примечание для других: используя .model, как объяснил Рики, я смог получить полную структуру данных {{item}} (как объект) из dom-repeat (что на самом деле и является тем, что Я все равно хотел сделать) - person Sean; 14.09.2015

arrow_upward
2
arrow_downward

Для привязки к собственному атрибуту, такому как data-*, вам придется использовать привязку атрибута ($=). Что касается ретаргетинга событий, вам придется использовать Polymer.dom(event).localTarget, чтобы добраться до нужной цели, излучающей это событие, в этом случае ваша бумажная кнопка (rootTarget также вернет бумажный материал).

Вот рабочий пример, который я сделал. http://jsbin.com/fehene/edit?html,output

person Neil John Ramal    schedule 10.09.2015
comment
data-attr также можно получить с помощью elem.dataset.attr. - person Neil John Ramal; 10.09.2015
comment
Работает как шарм. - person Abhilash; 06.02.2017

arrow_upward
0
arrow_downward

После некоторого взлома выясняется, что свойство dataHost на цели указывает на исходный элемент, на который нажали. Не уверен, почему это не задокументировано. Это может быть ненадежно, но это работает для меня.

event.target.dataHost.args

ОБНОВЛЕНИЕ: приведенное выше не работает в конце концов

Фу. Все еще взламывает.

ОБНОВЛЕНИЕ: оказывается, что атрибуты данных нужно указывать в верблюжьем регистре.

event.target.dataHost.dataArgs

Супер запутанный и скрытый :-/

person Sean    schedule 09.09.2015
comment
this обычно относится к элементу повышения в делегированных событиях, может быть менее надуманным... - person dandavis; 10.09.2015
comment
Дэн, не уверен, что вы имеете в виду, используя this. Внутри функции обработчика ссылка this указывает на элемент Polymer, который в данном случае является родительским элементом/контейнером. Я обновлю вопрос, чтобы он был более ясным, если это поможет найти решение. - person Sean; 10.09.2015